#Vue CLI

This chapter introduces how to migrate a Vue CLI project to Rsbuild.

#Install dependencies

First, you need to replace the npm dependencies of Vue CLI with Rsbuild's dependencies.

• Remove Vue CLI dependencies:

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

• Install Rsbuild dependencies:

npm add @rsbuild/core @rsbuild/plugin-vue -D

#Update npm scripts

Next, you need to update the npm scripts in the package.json file to Rsbuild's CLI commands.

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "serve": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  }
}

#Create configuration file

Create a Rsbuild configuration file rsbuild.config.ts in the same directory as package.json, and add the following content:

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()],
  source: {
    // Specify the entry file
    entry: {
      index: './src/main.js',
    },
  },
});

#HTML template

Vue CLI uses the public/index.html file as the default HTML template. In Rsbuild, you can specify the HTML template through html.template:

export default defineConfig({
  html: {
    template: './public/index.html',
  },
});

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:

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

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.

#Config migration

Here is the corresponding Rsbuild configuration for Vue CLI configuration:

Notes:

• When migrating 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.
• The above table does not cover all configurations of Vue CLI, feel free to add more.

#Environment variables

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.

import { defineConfig, loadEnv } from '@rsbuild/core';

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

export default defineConfig({
  source: {
    define: publicVars,
  },
});

#Contents supplement

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.