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 插件等），下面来看一下具体内容。下面来看一下具体内容

{
// 项目名称
"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官方文档

// 导入必要的模块和插件
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 应用。

// 从 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')