ruoyi-vue（十四）——前端框架及package.json，vite.config.js， main.js文件介绍

一、Vue

Vue是什么

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。具体内容可以从Vue官方文档中进行了解，我这里选用的是ruoyi vue3版本的前端代码。

二、package.json

有点儿类似后端的Maven，可以配置依赖包以及启动的相关信息，简单的来说是前端的一个版本管理工具。其定义了ruoyi项目基本信息、依赖包和构建脚本。主要包含：项目元数据（名称、版本等）、运行和构建脚本（vite 相关命令）、生产依赖（vue、element-plus 等）和开发依赖（vite 插件等），下面来看一下具体内容。下面来看一下具体内容

json 复制代码

{
  // 项目名称
  "name": "ruoyi",
  // 项目版本号
  "version": "3.9.0",
  // 项目描述
  "description": "若依管理系统",
  // 作者
  "author": "若依",
  // MIT开源许可证
  "license": "MIT",
  // 指定模块系统为ES6模块
  "type": "module",
  // 定义项目开发和构建时使用的命令
  "scripts": {
     // 启动开发服务器，使用vite
    "dev": "vite",
    // 生产环境构建，使用vite build
    "build:prod": "vite build",
    // 预发布环境构建，使用vite build --mode staging
    "build:stage": "vite build --mode staging",
    // 预览构建后的项目，使用vite preview
    "preview": "vite preview"
  },
  // 代码仓库
  "repository": {
    "type": "git",
    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
  },
  // 依赖包
  "dependencies": {
     // Element Plus 图标库
    "@element-plus/icons-vue": "2.3.1",
    // Vue的富文本编辑器组件
    "@vueup/vue-quill": "1.2.0",
    // Vue Composition API实用工具集合
    "@vueuse/core": "13.3.0",
    // HTTP 客户端
    "axios": "1.9.0",
    // 剪贴板操作库
    "clipboard": "2.0.11",
    // 图标库，用于数据可视化
    "echarts": "5.6.0",
    // UI组件库
    "element-plus": "2.9.9",
    // 文件保存库
    "file-saver": "2.0.5",
    // 轻量级模糊搜索库
    "fuse.js": "6.6.2",
    // JavaScript 代码美化工具
    "js-beautify": "1.14.11",
    // Cookie 操作库
    "js-cookie": "3.0.5",
    // JavaScript 加密库
    "jsencrypt": "3.3.2",
    // 顶部加载进度条
    "nprogress": "0.2.0",
    // Vue 状态管理库
    "pinia": "3.0.2",
    // 可拖拽分割面板组件
    "splitpanes": "4.0.4",
    // Vue3核心框架
    "vue": "3.5.16",
    // 图片裁剪组件
    "vue-cropper": "1.1.1",
    // Vue 路由管理器
    "vue-router": "4.5.1",
    // 拖拽排序组件
    "vuedraggable": "4.1.0"
  },
  // 项目开发时需要的依赖包
  "devDependencies": {
    // Vite的Vue插件，用于处理Vue文件
    "@vitejs/plugin-vue": "5.2.4",
    // Sass样式预处理器
    "sass-embedded": "1.89.1",
    // 自动导入API的Vite插件
    "unplugin-auto-import": "0.18.6",
    // 扩展Vue setup语法的插件
    "unplugin-vue-setup-extend-plus": "1.0.1",
    // 构建工具
    "vite": "6.3.5",
    // 构建时文件压缩插件
    "vite-plugin-compression": "0.5.1",
    // SVG图标处理插件
    "vite-plugin-svg-icons": "2.0.1"
  },
  // 依赖覆盖
  "overrides": {
     // 指定quill包的版本为2.0.2，用于解决依赖冲突 
    "quill": "2.0.2"
  }
}

三、vite.config.js

为 ruoyi 项目提供了完整的开发和构建环境配置，包括路径别名、插件系统、代理设置、打包规则等，确保项目能够高效开发和稳定构建。

在Vue2中用的是vue.config.js而在Vue3中用的是vite.config.js，vue.config.js 是 Vue CLI（基于 webpack）项目的配置文件，使用 CommonJS 语法，配置 webpack 构建选项。vite.config.js 是 Vite 项目的配置文件，使用 ES6 模块语法，配置 Vite 构建选项。Vite官方文档

javascript 复制代码

// 导入必要的模块和插件
import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'

// 定义后端接口基础url
const baseUrl = 'http://localhost:8080'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
    // 例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
    base: VITE_APP_ENV === 'production' ? '/' : '/',
    // 插件配置
    plugins: createVitePlugins(env, command === 'build'),
    // 路径解析配置
    resolve: {
      // https://cn.vitejs.dev/config/#resolve-alias
      alias: {
        // 设置路径，~ 指向项目根目录
        '~': path.resolve(__dirname, './'),
        // 设置别名，@指向src目录
        '@': path.resolve(__dirname, './src')
      },
      // https://cn.vitejs.dev/config/#resolve-extensions
      // 配置文件扩展名自动解析，引入时不需要写文件后缀
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    // 打包配置
    build: {
      // https://vite.dev/config/build-options.html
      // 开发环境生成内联源码映射，生产环境不生产
      sourcemap: command === 'build' ? false : 'inline',
      // 构建输出目录为dist
      outDir: 'dist',
      // 静态资源目录为 assets
      assetsDir: 'assets',
      // 设置块大小警告限制为：2000KB
      chunkSizeWarningLimit: 2000,
      // 自定义输出文件命名规则
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        }
      }
    },
    // vite 相关配置
    server: {
      // 使用端口
      port: 80,
      // 监听所有地址
      host: true,
      // 启动后自动打开浏览器
      open: true,
      // 代理配置
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        // /dev-api 路径代理到 http://localhost:8080
        '/dev-api': {
          target: baseUrl,
          changeOrigin: true,
          // 重写路径，去掉 /dev-api 前缀
          rewrite: (p) => p.replace(/^\/dev-api/, ''),
          // 添加 X-Forwarded-* 头信息
          configure: (proxy, options) => {
            proxy.on('proxyReq', (proxyReq, req, res) => {
              // 添加X-Forwarded-*头
              proxyReq.setHeader('X-Forwarded-Host', req.headers.host);
              proxyReq.setHeader('X-Forwarded-Proto', 'http');
              proxyReq.setHeader('X-Forwarded-For', req.socket.remoteAddress);
            });
          }
        },
         // springdoc proxy
         // /v3/api-docs/ 路径也代理到后端，用于 API 文档
         '^/v3/api-docs/(.*)': {
          target: baseUrl,
          changeOrigin: true,
        }
      }
    },
    // css配置
    css: {
      // 使用 PostCSS 插件移除 CSS 中的 charset 声明，避免重复或冲突
      postcss: {
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') {
                  atRule.remove()
                }
              }
            }
          }
        ]
      }
    }
  }
})

四、main.js

ruoyi 项目的 Vue 应用入口文件，主要功能包括：

创建 Vue 应用实例：使用 createApp 创建应用
导入和配置依赖：引入 Element Plus、路由、状态管理等
全局组件注册：注册分页、编辑器、上传等通用组件
全局方法挂载：挂载字典处理、时间解析等工具方法
权限控制：引入权限控制模块
应用启动：挂载到 #app DOM 元素核心作用是初始化并启动整个 Vue 应用。

javascript 复制代码

// 从 Vue 3 导入 createApp 函数创建应用实例
import { createApp } from 'vue'
// 引入 js-cookie 用于操作浏览器 cookie
import Cookies from 'js-cookie'
// 导入 Element Plus 组件库及其样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import locale from 'element-plus/es/locale/lang/zh-cn'
// 导入全局样式文件
import '@/assets/styles/index.scss' // global css

// 核心应用模块
// 导入根组件 App.vue
import App from './App'
// 导入状态管理 store（Pinia 或 Vuex）
import store from './store'
// 导入路由配置
import router from './router'
// 导入自定义指令
import directive from './directive' // directive

// 注册指令
// 导入自定义插件
import plugins from './plugins' // plugins
// 导入下载工具函数
import { download } from '@/utils/request'

// svg图标
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon'
import elementIcons from '@/components/SvgIcon/svgicon'

// 导入权限控制模块
import './permission' // permission control
// 导入工具函数
import { useDict } from '@/utils/dict'
import { getConfigKey } from "@/api/system/config"
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'

// 导入通用业务组件
// 分页组件
import Pagination from '@/components/Pagination'
// 自定义表格工具组件
import RightToolbar from '@/components/RightToolbar'
// 富文本组件
import Editor from "@/components/Editor"
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 创建应用实例
const app = createApp(App)

// 全局方法挂载，将常用的工具函数挂载到全局属性中，使得在任何组件中都可以通过 this 访问这些方法
app.config.globalProperties.useDict = useDict
app.config.globalProperties.download = download
app.config.globalProperties.parseTime = parseTime
app.config.globalProperties.resetForm = resetForm
app.config.globalProperties.handleTree = handleTree
app.config.globalProperties.addDateRange = addDateRange
app.config.globalProperties.getConfigKey = getConfigKey
app.config.globalProperties.selectDictLabel = selectDictLabel
app.config.globalProperties.selectDictLabels = selectDictLabels

// 全局组件挂载，这样在任何组件模板中都可以直接使用这些组件，无需单独导入
app.component('DictTag', DictTag)
app.component('Pagination', Pagination)
app.component('FileUpload', FileUpload)
app.component('ImageUpload', ImageUpload)
app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)
app.component('Editor', Editor)

// 安装路由、状态管理、自定义插件和图标组件
app.use(router)
app.use(store)
app.use(plugins)
app.use(elementIcons)
app.component('svg-icon', SvgIcon)

// 自定义指令应用
directive(app)

// 使用element-plus 并且设置全局的大小，配置 Element Plus 使用中文语言包，并根据 cookie 中的设置确定组件大小
app.use(ElementPlus, {
  locale: locale,
  // 支持 large、default、small
  size: Cookies.get('size') || 'default'
})

// 应用挂载，Vue 应用挂载到页面中 id 为 'app' 的 DOM 元素上
app.mount('#app')