vuecli4.x迁移至rsbuild记录

准备

官方文档

Vue CLI - Rsbuild

开始

移除vuecli的依赖

npm remove @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint core-js

如果有ts则还需移除@vue/cli-plugin-typescript

npm remove @vue/cli-plugin-typescript

安装rsbuild的依赖

npm add @rsbuild/core @rsbuild/plugin-vue2 @rsbuild/plugin-vue2-jsx @rsbuild/plugin-babel @rsbuild/plugin-sass -D

新建rsbuild.config.js

import { defineConfig, loadEnv } from '@rsbuild/core'
import { pluginVue2 } from '@rsbuild/plugin-vue2'
import { pluginVue2Jsx } from '@rsbuild/plugin-vue2-jsx'
import { pluginBabel } from '@rsbuild/plugin-babel'
import { pluginSass } from '@rsbuild/plugin-sass'
import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill'

const { publicVars } = loadEnv({ prefixes: ['VUE_APP_'] })

export default defineConfig({
  source: {
    entry: {
      index: './src/main.ts' // Vue CLI 的默认入口文件
    },
    define: publicVars, // 环境变量
    include: [ // 需二次编译
      /[\\/]node_modules[\\/]vxe-table/,
    ],
    decorators: { // 装饰器语法版本
      version: 'legacy',
    },
  },
  output: {
    distPath: {
      root: publicVars.VUE_APP_OUTPUT_DIR
    },
    assetPrefix: publicVars.VUE_APP_BASEURL,
    externals: {
    }
  },
  server: { // 本地服务代理
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://www.baidu.com', // dev
        changeOrigin: true
      },
    }
  },
  html: {
    template: './public/index.html',
    templateParameters: {
      isPrd: ['prd', 'local'].includes(publicVars.VUE_APP_CURRENTMODE)
    }
  },
  resolve: {
    alias: {
        '@': './src'
    },
  },
  plugins: [
    pluginNodePolyfill(), // node模块
    pluginBabel(), // 注意顺序
    pluginVue2(),
    pluginVue2Jsx(),
    pluginSass({
      sassLoaderOptions: {
        additionalData: (content, ctx) => {
          return (ctx.resource.includes('scss-global') || ctx.resource.includes('lang=css') || ctx.resource.includes('.css'))
            ? content
            : `
              @use 'sass:math';
              @import './src/styles/scss-global/index.scss';
              ${content}`
        },
      }
    })
  ]
})

问题

一般按照官方文档步骤来，不太容易有问题，但是文档上只是最基础的版本，还有些场景需要去适配

报装饰器相关错误

Definitely assigned fields cannot be initialized here, but only in the constructor

 这是因为rsbuild默认处理装饰器的方式和我们的写法不兼容，可尝试在rsbuild.config.js中添加以下配置

{
  source: {
    ...
    decorators: { // 装饰器语法版本
      version: 'legacy',
    }
  }
}

编译jsx报错

@rsbuild/plugin-vue2-jsx需要搭配@rsbuild/plugin-babel，并且plugin中babel插件需要在vue插件上面

{
  plugins: [
    ...
    pluginBabel(), // 注意顺序
    pluginVue2(),
    pluginVue2Jsx(),
    ...
  ]
}

本地启动路径带后缀

比如启动后显示如下内容

  ➜ Local:    http://localhost:8083/app
  ➜ press h + enter to show shortcuts

这是因为entry那里配的不对，把app换成index即可解决

{
  source: {
    entry: {
      app: './src/main.ts' // app 换成 index
    },
  }
}