webpack+vue2项目迁移rsbuild踩坑说明

背景

因旧系统vuecli(webpack) + vue2构建速度慢，影响开发效率，决定迁移更快的构建工具。考虑该项目使用大量cjs语法，不希望改动过大（尽量保留原cjs语法内容），最终决定更换构建工具rsbuild

迁移效果

构建工具	初次启动时间	打包时间	热更新
webpack5	22秒	40秒	30秒
rsbuild1.1.8	8秒	12秒	0.5秒

Rsbuild官方迁移指引

Rsbuild 提供了各种框架的迁移指引，附上vue-cli: rsbuild.dev/zh/guide/mi…

参考资料

主要参考：juejin.cn/post/739512…

资料踩坑经验不完善，还得自己来

迁移注意事项

样式深度穿透

Vue-cli 老项目最常见的是/deep/ 写法，需要全局替换::v-deep

路由组件方式

require对应的组件，改用import

component: (resolve) => require(['../views/operationsProject/projects/projects.vue'], resolve),

改成：

component: () => import("@/views/operationsProject/projects/projects.vue"),

sass版本

建议固定sass插件版本：1.32.13 （更新版本会提示警告信息，提示现在的写法会在sass2.0 和 sass3.0废弃）

Vue 升级2.7

Vue 升级2.7，element-ui组件报错，需要安装插件 @rsbuild/plugin-vue2-jsx ，tdesign-vue组件需要安装naruto版本（建议固定tdesign-vue版本，避免破坏性版本更新影响老系统运行）

"tdesign-vue": "1.8.4-naruto",

html文件更改

原静态资源前缀字段，BASE_URL改成assetPrefix

<link rel="icon" href="<%= assetPrefix %>/favicon.ico" />

兼容process.env

项目内使用process.env不希望改动，可以配置define字段来实现(网上的资料关于define的设置都是错的)

import { defineConfig, loadEnv } from "@rsbuild/core";
const { publicVars } = loadEnv({ prefixes: ["VUE_APP_", "MONITOR_"] });

let newEnv = {};
for (let key in publicVars) {
  const pre = "process.env.";
  if (key.indexOf(pre) === 0) {
    let k = key.replace(pre, "");
    newEnv[k] = publicVars[key];
  }
}
// 在source字段下配置 define
    define: {
      process: {
        env: {
          ...newEnv,
        },
      },
    },

rsbuild.config.ts

完整的配置：

import { defineConfig, loadEnv } from "@rsbuild/core";
import { pluginVue2 } from "@rsbuild/plugin-vue2";
const { pluginVue2Jsx } = require("@rsbuild/plugin-vue2-jsx");
// const { pluginBabel } = require('@rsbuild/plugin-babel')
const sassPlugin = require("@rsbuild/plugin-sass");
// console.log('sassPlugin: ', sassPlugin)
const { publicVars } = loadEnv({ prefixes: ["VUE_APP_", "MONITOR_"] });
let newEnv = {};
for (let key in publicVars) {
  const pre = "process.env.";
  if (key.indexOf(pre) === 0) {
    let k = key.replace(pre, "");
    newEnv[k] = publicVars[key];
  }
}
// console.log("publicVars: ", typeof publicVars, publicVars);
export default defineConfig({
  plugins: [
    pluginVue2(),
    pluginVue2Jsx(),
    // pluginBabel({
    //   include: /.(?:js|jsx|tsx)$/,
    //   // exclude: /[\/]node_modules[\/]/,
    // }),
    sassPlugin.pluginSass({
      sassLoaderOptions: {
        implementation: require.resolve("sass"),
      },
    }),
  ],
  html: {
    template: "./public/index.html",
  },
  source: {
    define: {
      process: {
        env: {
          ...newEnv,
          // 设置其它环境的NODE_ENV值 不能在.env文件里面定义NODE_ENV
          NODE_ENV: newEnv["VUE_APP_NODE_ENV"] || newEnv["NODE_ENV"],
        },
      },
    },
    // 指定入口文件
    entry: {
      index: "./src/main.js",
    },
    alias: {
      "@": "./src",
    },
  },
  dev: {
    assetPrefix: "/",
  },
  output: {
    assetPrefix: "/moitom",
  },
  tools: {},
  server: {
    port: 1254,
    host: "0.0.0.0",
    proxy: {
      "/moitom/api": {
        target: "http://192.168.0.666",
        changeOrigin: true,
      },
    },
  },
});