rust加持下，老项目也能飞起！ vue-cli 迁移 rsbuild (vue3)截至2024年9月，vue-cli已

站长

2024年10月04日 20:42 · 阅读数 25

截至2024年9月，vue-cli已经不怎么更新了，vue-cli基于webpack创建，迁移到vite的成本并不算低，还好有rsbuild，兼容webpack，让迁移成本大大降低。

rsbuild 是rspack的上层封装，配置更简单些。

rust加持下，老项目也能飞起！ vue-cli 迁移 rsbuild (vue3)截至2024年9月，vue-cli已

依赖安装

// package.json

{
    "scripts": {
        "dev": "rsbuild dev --env-mode serve",
        "build": "rsbuild build --env-mode build",
        //...
    },
     "dependencies": {
     "vue": "^3.5.8",
     //...
     },
     "devDependencies": {
        "@rsbuild/core": "^1.0.1",
        "@rsbuild/plugin-babel": "^1.0.1",
        "@rsbuild/plugin-sass": "^1.0.1",
        "@rsbuild/plugin-vue": "^1.0.1",
        "@rsbuild/plugin-vue-jsx": "^1.0.1",
        "@types/node": "^22.7.3",
        //...
     }
}

在vite里面用--mode可以指定读取哪一个env文件，在rsbuild下用--env-mode。
不使用jsx就不配置@rsbuild/plugin-babel和@rsbuild/plugin-vue-jsx，使用babel，性能会更差。

rsbuild配置

项目根目录下rsbuild.config.ts

import { defineConfig, loadEnv } from "@rsbuild/core";
import { pluginBabel } from "@rsbuild/plugin-babel";
import { pluginVue } from "@rsbuild/plugin-vue";
import { pluginVueJsx } from "@rsbuild/plugin-vue-jsx";
import { pluginSass } from "@rsbuild/plugin-sass";

const { parsed, publicVars } = loadEnv({ prefixes: ["VUE_APP_"] });

export default defineConfig({
    source: {
        entry: {
            index: "./src/main.ts",
        },
        define: {
            ...publicVars,
        },
    },
    html: {
        template: "./public/index.html",
        templateParameters: {
            VUE_APP_TITLE: parsed.VUE_APP_TITLE,
        },
    },
    plugins: [
        pluginBabel({
            include: /\.(?:jsx|tsx)$/,
        }),
        pluginVue(),
        pluginVueJsx(),
        pluginSass(),
    ],
    server: {
        port: 4433,
        proxy: {
            "/api": {
                target: "http://proxy.com/api/",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "",
                },
            },
        },
    },
});

loadEnv可以读取.env文件的配置，通过publicVars加到client端
index.html 文件的变量可以通过配置templateParameters修改

index.html配置

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= assetPrefix %>/favicon.ico" />
    <title><%= VUE_APP_TITLE %></title>
  <body>
    <noscript>
      <strong
        >We're sorry but doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

assetPrefix相当于vite下的base,是静态文件前缀，可以通过output.assetPrefix修改
VUE_APP_TITLE在html.templateParameters修改

tsconfig.json配置

{
    "compilerOptions": {
        "jsx": "preserve",
        "jsxImportSource": "vue",
        "types": [
            "node",
            "@rsbuild/core/types", //...
        ],
        "paths": {
          "@/*": ["src/*"]
        },
        //...
    },
    //...
}

jsx 配置"jsx": "preserve"，"jsxImportSource": "vue"
compilerOptions.types添加 @rsbuild/core/types

注意事项

process和import.meta不能在client端，也就是vue文件等直接解构使用，需要写全

const NODE_ENV = process.env.NODE_ENV;
const MODE = import.meta.env.MODE

.env.[mode]的mode在client端拿不到，需要自己配置

// .env.test文件
MODE_ENV = test

// rsbuild.config.ts
// source.define 下
{
    source: {
         define: {
            //...
            'process.env.MODE_ENV': JSON.stringify(process.env.MODE_ENV),
            'import.meta.env.MODE_ENV': JSON.stringify(process.env.MODE_ENV),
        },
    }
   //...
}

现在你的项目就可以享受火箭般的速度啦。

转载自:https://juejin.cn/post/7418771710453825551