Vue-cli迁移Rsbuild
🛠️ Vue CLI 项目迁移到 Rsbuild 指南
📦 一、为什么迁移到 Rsbuild？
- ⚡ 构建更快：基于 Rspack 构建，性能比 Webpack 更强。
- 📁 配置更灵活：支持现代配置语法，更易读可维护。
- 🧩 插件生态丰富：内置 Vue、Less、TypeScript 支持，无需额外配置。
- 🧹 自动优化：默认启用 Tree-shaking、缓存等现代优化技术。
🚧 二、迁移准备工作 (以npm为例)
1. 卸载 Vue CLI 相关依赖
npm remove @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint core-js
2. 安装 Rsbuild 及其插件
npm install @rsbuild/core @rsbuild/plugin-vue @rsbuild/plugin-less -D
📂 三、迁移目录结构建议（可选）
保持原目录结构基本不变，大部分迁移只涉及构建配置部分：
├── public/ # 静态资源目录
├── src/
│ ├── assets/
│ ├── components/
│ ├── views/
│ └── main.ts # 入口文件
├── index.html
├── rsbuild.config.ts # Rsbuild 配置文件
└── tsconfig.json
⚙️ 四、核心配置迁移：vue.config.js → rsbuild.config.ts
新建 rsbuild.config.ts，将原来的 vue.config.js 中核心配置进行迁移。
✅ 示例完整配置：
// rsbuild.config.ts
import { defineConfig } from "@rsbuild/core";
import { pluginVue } from "@rsbuild/plugin-vue";
import { pluginLess } from "@rsbuild/plugin-less";
import path from "path";// 目录解析函数
const resolve = (dir: string) => path.resolve(__dirname, dir);// 环境代理配置映射（支持 dev、old_dev、pro）
const proxyMap = {dev: "https://abc.cn/",old_dev: "http://175.34.2.58:8889",pro: "https://aaa.com/"
};// 当前执行的 npm 脚本名决定代理目标
const env = process.env.npm_lifecycle_event || "dev";// ✅ Rsbuild 主配置
export default defineConfig({// 插件配置plugins: [pluginVue(),pluginLess({lessLoaderOptions: {lessOptions: {javascriptEnabled: true,modifyVars: {"primary-color": "#409EFF","success-color": "#67C23A","warning-color": "#E6A23C","error-color": "#F05F60","link-color": "#1890FF","@text-color": "#333333","@text-color-secondary": "#999999","@border-radius-base": "4px"}},// 全局样式注入additionalData: '@import "@/assets/less/global.less";'}})],// 开发配置dev: {hmr: true,writeToDisk: true, // 开发时是否写入磁盘（方便调试）cache: {type: "filesystem" // 使用磁盘缓存加速编译}},// 入口文件和别名定义source: {entry: {index: resolve("src/main.ts")},alias: {"@": resolve("src")},define: {// 设置环境变量"process.env": {API_BASE_URL: JSON.stringify(process.env.VUE_APP_API_BASE_URL)}}},// devServer 配置（替代 vue.config.js 中的 devServer）server: {port: 8080,compress: false,hmr: true,proxy: {"/api": {target: proxyMap[env],changeOrigin: true,logLevel: "debug",cookieDomainRewrite: {"*": "localhost"}}}},// 构建输出配置output: {assetPrefix: "/", // 公共资源路径manifest: true, // 是否生成 manifest.jsondistPath: {root: "./dist"},sourceMap: {js: process.env.NODE_ENV === "development" ? "inline-source-map" : "source-map",css: false}},html: {template: "./public/index.html"},// 去除生产环境 consoleperformance: {removeConsole: true},// bundlerChain 可以访问底层 Rspack 配置，适配 Webpack 迁移项tools: {bundlerChain(config) {/*** 🖼️ 处理 SVG 图标为 sprite 图（替代 vue.config.js 中的 svg-sprite-loader）*/config.module.rules.delete("svg");config.module.rule("svg-sprite-loader").test(/\.svg$/).include.add(resolve("src/assets/icons")).end().use("svg-sprite-loader").loader("svg-sprite-loader").options({symbolId: "icon-[name]"});/*** 📦 拆包策略（等价于 vue.config.js -> chainWebpack.optimization.splitChunks）*/config.optimization.splitChunks({chunks: "all",minSize: 20000,maxAsyncRequests: 6,maxInitialRequests: 6,cacheGroups: {"vendors-base": {test: /[\\/]node_modules[\\/](vue|vue-router|axios)/,name: "vendors-base",priority: 10,reuseExistingChunk: true},"vendors-console": {test: /[\\/]node_modules[\\/](ant-design-vue|dayjs)/,name: "vendors-console",priority: 8,reuseExistingChunk: true},"vendors-jspreadsheet": {test: /[\\/]node_modules[\\/](@jspreadsheet)/,name: "vendors-jspreadsheet",priority: 8,reuseExistingChunk: true},"chunk-vendors": {test: /[\\/]node_modules[\\/]/,name: "chunk-vendors",priority: 1,reuseExistingChunk: true}}});}}
});
🔄 五、环境变量迁移
Vue CLI 使用 .env.* 文件定义变量，例如：
VUE_APP_API_BASE_URL='/api'
Rsbuild 同样支持 .env 文件，使用 process.env.VUE_APP_API_BASE_URL 获取，无需修改原代码中的变量读取逻辑。
🧪 六、运行开发环境
npx rsbuild dev
🧱 七、打包构建项目
npx rsbuild build
✅ 八、注意事项
| 项目 | Vue CLI | Rsbuild |
|---|---|---|
| 构建工具 | Webpack | Rspack（更快） |
| SVG 图标处理方式 | svg-sprite-loader | 相同（配置写法略不同） |
| 全局 less 变量引入 | style-resources-loader | 使用 additionalData 方式引入 |
| 环境变量注入 | process.env.VUE_APP_ | 同样支持，无需更改 |
| 拆包优化配置 | chainWebpack | tools.bundlerChain 内设置 |
📌 九、推荐 Rsbuild 插件（按需使用）
| 插件 | 用途 |
|---|---|
| @rsbuild/plugin-vue | Vue 3 支持 |
| @rsbuild/plugin-less | Less 支持 + 变量注入 |
| @rsbuild/plugin-swc | 替代 Babel 编译器，速度更快 |
| @rsbuild/plugin-legacy | 浏览器兼容插件，支持低版本浏览器 |
| @rsbuild/plugin-analyze | 构建分析图（类似 webpack-bundle-analyzer） |
如需进一步定制，可参考官方文档：
🔗 Rsbuild 官方文档
scripts：
"scripts": {"dev": "rsbuild dev","build": "rsbuild build","analyze": "rsbuild build --analyze"
}