RuoYi-Vue前端工程化：Vite构建工具配置

RuoYi-Vue前端工程化：Vite构建工具配置

【免费下载链接】RuoYi-Vue :tada: (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本 项目地址: https://gitcode.com/GitHub_Trending/ru/RuoYi-Vue

引言

在现代前端开发中，构建工具扮演着至关重要的角色。它们负责将源代码转换为可在浏览器中运行的最终产品，包括代码打包、压缩、优化等一系列任务。RuoYi-Vue作为一款基于Vue的前后端分离权限管理系统，其前端工程化配置直接影响开发效率和生产环境性能。本文将详细解析RuoYi-Vue前端项目的构建工具配置，帮助开发者深入理解项目结构并进行个性化优化。

项目构建基础

RuoYi-Vue前端项目采用Vue CLI作为构建工具，通过ruoyi-ui/vue.config.js文件进行配置。Vue CLI是一个基于Webpack的Vue.js项目脚手架，它简化了项目的创建和配置过程，提供了丰富的功能和插件生态。

核心配置文件

项目的构建配置主要集中在以下几个文件：

• ruoyi-ui/vue.config.js: 主配置文件，包含所有构建相关的设置
• ruoyi-ui/package.json: 项目依赖和脚本定义

构建脚本

在ruoyi-ui/package.json中定义了几个核心构建脚本：

"scripts": {
  "dev": "vue-cli-service serve",
  "build:prod": "vue-cli-service build",
  "build:stage": "vue-cli-service build --mode staging",
  "preview": "node build/index.js --preview"
}

• npm run dev: 启动开发服务器，支持热重载
• npm run build:prod: 构建生产环境版本
• npm run build:stage: 构建测试环境版本
• npm run preview: 预览构建结果

基础配置详解

项目路径配置

在ruoyi-ui/vue.config.js中，首先定义了路径解析函数：

function resolve(dir) {
  return path.join(__dirname, dir)
}

这个函数用于将相对路径转换为绝对路径，在后续配置中频繁使用。

部署路径配置

publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
outputDir: 'dist',
assetsDir: 'static',

• publicPath: 部署应用包时的基本URL，生产环境使用根路径
• outputDir: 构建输出目录，默认为dist
• assetsDir: 静态资源输出目录，所有js、css、img等资源会被打包到这里

开发服务器配置

devServer: {
  host: '0.0.0.0',
  port: port,
  open: true,
  proxy: {
    [process.env.VUE_APP_BASE_API]: {
      target: baseUrl,
      changeOrigin: true,
      pathRewrite: {
        ['^' + process.env.VUE_APP_BASE_API]: ''
      }
    },
    '^/v3/api-docs/(.*)': {
      target: baseUrl,
      changeOrigin: true
    }
  },
  disableHostCheck: true
}

这里配置了开发服务器的端口、自动打开浏览器以及API代理。特别是proxy设置，解决了开发环境中的跨域问题，将API请求代理到后端服务器。

高级配置特性

Gzip压缩

RuoYi-Vue配置了Gzip压缩来减小文件体积，提升加载速度：

new CompressionPlugin({
  cache: false,                                 // 不启用文件缓存
  test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式
  filename: '[path][base].gz[query]',           // 压缩后的文件名
  algorithm: 'gzip',                            // 使用gzip压缩
  minRatio: 0.8,                                // 压缩比例，小于80%的文件不会被压缩
  deleteOriginalAssets: false                   // 压缩后不删除原文件
})

这个配置通过compression-webpack-plugin插件实现，在生产构建时自动对静态资源进行Gzip压缩。

SVG图标处理

项目中使用了svg-sprite-loader来处理SVG图标：

config.module
  .rule('svg')
  .exclude.add(resolve('src/assets/icons'))
  .end()
config.module
  .rule('icons')
  .test(/\.svg$/)
  .include.add(resolve('src/assets/icons'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
    symbolId: 'icon-[name]'
  })
  .end()

这种方式可以将多个SVG图标合并为一个雪碧图，减少HTTP请求，同时方便在代码中引用。项目中的SVG图标存储在src/assets/icons/svg/目录下。

代码分割

为了优化加载性能，RuoYi-Vue配置了代码分割策略：

config.optimization.splitChunks({
  chunks: 'all',
  cacheGroups: {
    libs: {
      name: 'chunk-libs',
      test: /[\\/]node_modules[\\/]/,
      priority: 10,
      chunks: 'initial'
    },
    elementUI: {
      name: 'chunk-elementUI',
      test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
      priority: 20
    },
    commons: {
      name: 'chunk-commons',
      test: resolve('src/components'),
      minChunks: 3,
      priority: 5,
      reuseExistingChunk: true
    }
  }
})

这个配置将代码分为三类：

• 第三方库代码
• Element UI组件库
• 公共业务组件

通过合理的代码分割，可以实现资源的按需加载，提高首屏加载速度。

性能优化配置

生产环境优化

productionSourceMap: false,

禁用生产环境的source map，可以减小构建文件体积并提高安全性。

CSS配置

css: {
  loaderOptions: {
    sass: {
      sassOptions: { outputStyle: "expanded" }
    }
  }
}

这里配置了Sass的编译选项，采用展开式输出风格，便于调试。

运行时chunk

config.optimization.runtimeChunk('single')

将Webpack运行时代码提取为单独的chunk，避免其影响应用代码的缓存策略。

从Vue CLI迁移到Vite的建议

虽然当前项目使用Vue CLI作为构建工具，但考虑到Vite在开发体验和构建性能上的优势，这里提供一些迁移到Vite的建议：

1. 创建Vite配置文件

在项目根目录创建vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 80,
    proxy: {
      '/dev-api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/dev-api/, '')
      }
    }
  }
})

2. 安装必要依赖

npm install vite @vitejs/plugin-vue -D
npm uninstall @vue/cli-service

3. 更新package.json脚本

"scripts": {
  "dev": "vite",
  "build:prod": "vite build",
  "preview": "vite preview"
}

4. 处理兼容性问题

• 将public/index.html中的<%= BASE_URL %>替换为%VITE_BASE_URL%
• 调整环境变量前缀，从VUE_APP_改为VITE_
• 处理可能不兼容的Webpack特定插件和配置

总结

RuoYi-Vue的前端构建配置通过ruoyi-ui/vue.config.js文件实现了全面的工程化支持，包括开发服务器、代码压缩、资源优化等多个方面。这些配置不仅保证了开发效率，也确保了生产环境的性能优化。

随着前端技术的发展，考虑迁移到Vite可以进一步提升开发体验和构建速度。无论使用哪种构建工具，理解和合理配置构建过程都是前端工程师必备的技能，希望本文能为RuoYi-Vue开发者提供有价值的参考。

更多项目文档和资源：

• 官方文档：doc/若依环境使用手册.docx
• 项目源码：ruoyi-ui/
• 社区教程：README.md

【免费下载链接】RuoYi-Vue :tada: (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本 项目地址: https://gitcode.com/GitHub_Trending/ru/RuoYi-Vue