当前位置：首页 > news >正文

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

news 2025/9/13 6:10:04

一、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 } = envreturn {// 部署生产环境和开发环境下的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-aliasalias: {// 设置路径，~ 指向项目根目录'~': 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',// 构建输出目录为distoutDir: 'dist',// 静态资源目录为 assetsassetsDir: 'assets',// 设置块大小警告限制为：2000KBchunkSizeWarningLimit: 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、smallsize: Cookies.get('size') || 'default'
})// 应用挂载，Vue 应用挂载到页面中 id 为 'app' 的 DOM 元素上
app.mount('#app')