公司有许多项目仍然停留在 Vue 2 上，每次通过 VueCLI 启动都需要等待大约 30 秒（在 M1 芯片上），每次热重载的速度也让人难以忍受，构建速度同样缓慢。虽然可以通过 esbuild 等工具改善，但在某天多次修改需求后，我决定忍无可忍，于是有了这篇文章。决定迁移的原因主要有两点： 1. 对 Node 22 支持不友好。由于项目基于 VueCLI 3，Node 版本的诸多变更导致无法启动，必须通过 nvm 切换到 16 版本。 2. 构建和热更新速度慢。在决定使用 [Rsbuild](https://rsbuild.dev/zh/) 之后，我也进行了一番调研，备选方案有四个： 1. Webpack+SWC 或 Webpack+Esbuild 2. Vite 3. Rsbuild 4. Turbopack 以下是一些考虑： - **方案 1**：速度虽然有所改善，但仍然基于 Webpack，整体优化空间有限。 - **Vite**：虽然非常想迁移，但由于有许多使用 CommonJS 的包，迁移成本太大。 - **Rsbuild**：Rust 版本的 Webpack，大部分 Webpack 配置都兼容，是首选。 - **Turbopack**：暂时不支持 Vue 等框架。 ## 1. 遵循官方迁移指南官方提供了一个简短的迁移指南，可以根据文档对项目中涉及的部分进行更改。 [查看迁移指南](https://rsbuild.dev/zh/guide/migration/vue-cli) ## 2. 删除与 @vue/cli 相关的依赖例如，我删除了以下依赖： ```json { "@vue/cli-plugin-babel": "~4.5.13", "@vue/cli-plugin-eslint": "~4.5.13", "@vue/cli-plugin-router": "~4.5.13", "@vue/cli-plugin-vuex": "~4.5.13", "@vue/cli-service": "~4.5.13" } ``` ## 3. 修订别名和路径简写在项目中，通常会使用 `@/xxx` 的形式来引入模块，这属于 Webpack 的 alias 功能。此外，在 `import` 导入文件时可以省略 `.vue` 的扩展名，这也是 Webpack 的 `extensions` 功能。在 Rsbuild 中，可以通过以下方式定义： ```javascript export default defineConfig({ tools: { rspack: { devtool: "source-map", resolve: { extensions: [".vue", ".js", ".jsx", ".tsx", ".ts", ".json"], alias: { "@": path.resolve(__dirname, "src"), }, }, }, }, }); ``` ## 4. 安装 JSX、Less 和 SCSS 支持项目中经常会使用 Less，例如引入的 ant-design-vue 就使用了，因此需要支持 Less。由于之前没有统一标准，项目需要同时支持 Less 和 SCSS。 Less 官方维护了一个插件，可以按照使用方式安装：[Less 插件](https://rsbuild.dev/zh/plugins/list/plugin-less) 对于 Sass 和 JSX，按照官方指南安装相应插件：[Sass 插件](https://rsbuild.dev/zh/plugins/list/plugin-sass) [Vue2 JSX 插件](https://rsbuild.dev/zh/plugins/list/plugin-vue2-jsx) 整理后的配置文件如下： ```javascript import { defineConfig } from "@rsbuild/core"; import { pluginLess } from "@rsbuild/plugin-less"; import { pluginSass } from "@rsbuild/plugin-sass"; import { pluginBabel } from "@rsbuild/plugin-babel"; import { pluginVue2 } from "@rsbuild/plugin-vue2"; import { pluginVue2Jsx } from "@rsbuild/plugin-vue2-jsx"; export default defineConfig({ plugins: [ pluginBabel({ include: /\.(?:jsx|tsx)$/, }), pluginVue2(), pluginVue2Jsx(), pluginLess({ lessLoaderOptions: { lessOptions: { modifyVars: { "primary-color": "#5384FE", "error-color": "#ED4D37", "btn-danger-bg": "#ED4D37", "btn-danger-border": "#ED4D37", "success-color": "#48BB78", "text-color": "#4A5568", "text-color-secondary": "#A0AEC0", "btn-default-color": "#718096", "border-color-base": "#CBD5E0", "input-placeholder-color": "#A0AEC0", "tooltip-bg": "rgba(26,32,44,.8)", "heading-color": "#4A5568", "background-color-base": "#F7F8FA", }, javascriptEnabled: true, math: "always", }, }, }), pluginSass({ sassLoaderOptions: { additionalData: '@import "@/styles/variables.scss";@import "@/styles/mixin.scss";', // @import "@/styles/localIcon.scss"; }, }), ], }); ``` 需要注意的是，在使用 JSX 时，需要为 `

yliu

分类查看

近期文章