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": "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: {
    // Set the id of the HTML root element to 'app'
    mountId: 'app',
  },
});

This completes the basic migration from Vue CLI to Rsbuild. You can now run the npm run serve command to try starting the development server.

Configuration 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.

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/packages/document directory.