This chapter introduces how to migrate a Vue CLI project to Rsbuild.
First, you need to replace the npm dependencies of Vue CLI with Rsbuild's dependencies.
If your project is based on Vue 2, replace @rsbuild/plugin-vue
with @rsbuild/plugin-vue2
.
Next, you need to update the npm scripts in the package.json file to Rsbuild's CLI commands.
Rsbuild does not integrate ESLint, so it does not provide a command to replace vue-cli-service lint
. You can directly use ESLint's CLI commands as an alternative.
Create a Rsbuild configuration file rsbuild.config.ts
in the same directory as package.json, and add the following content:
If your project is based on Vue 2, use import { pluginVue2 } from '@rsbuild/plugin-vue2';
.
Vue CLI uses the public/index.html
file as the default HTML template. In Rsbuild, you can specify the HTML template through html.template:
In the HTML template, if you are using the BASE_URL
variable from Vue CLI, replace it with Rsbuild's assetPrefix variable and use a forward slash for concatenation:
This completes the basic migration from Vue CLI to Rsbuild. You can now run the npm run serve
command to try starting the dev server.
Here is the corresponding Rsbuild configuration for Vue CLI configuration:
Notes:
configureWebpack
, note that most of the Webpack and Rsbuild configs are the same, but there are also some differences or functionalities not implemented in Rsbuild.Vue CLI injects environment variables starting with VUE_APP_
into the client code by default, while Rsbuild injects environment variables starting with PUBLIC_
by default (see public variables).
To be compatible with Vue CLI's behavior, you can manually call Rsbuild's loadEnv method to read environment variables starting with VUE_APP_
, and inject them into the client code through the source.define config.
The current document only covers part of the migration process. If you find suitable content to add, feel free to contribute to the documentation via pull request 🤝.
The documentation for rsbuild can be found in the rsbuild/website directory.