SoFunction
Updated on 2025-04-12

Detailed steps for migrating Rsbuild in Vue2

background

Bottleneck encountered

The company's project is based on VueCLI 3, and has problems such as slow startup (about 30 seconds), slow hot reloading, slow construction, and unfriendly support for higher versions of Node. You need to switch to Node 16 version to start.

A brief introduction to Rsbuild

  • RsbuildPublished on 2024.09.10v1.0.1The official version, and the proposed issue was resolved soon.
  • RsbuildIt is based onRspackA build tool, a high-performance integration tool, can build projects with almost zero configuration.
  • RspackCan be solvedviteThe page loading speed during development is slow, and the construction mechanisms of the development environment and production environment are inconsistent.
  • Webpack ecocompatibility,RspackCompatible with most plug-ins of Webpack.

Specific steps

1. Complete the migration according to the official simple guide.

Vue CLI - Rsbuild

// 
const { defineConfig } = require('@rsbuild/core');
const { pluginVue2 } = require('@rsbuild/plugin-vue2');

export default defineConfig({
  html: {
    template: './public/',
  },
  plugins: [pluginVue2()],
  source: {
    // Specify the entry file    entry: {
      index: './src/',
    },
  },
});

2. Revise alias and path abbreviations

In projects, it is usually used@/xxxIn the form of  , the alias capability must be configured here.

// 
const { defineConfig } = require('@rsbuild/core');
const path = require('path');

export default defineConfig({
  source: {
    alias: {
      '@': (__dirname, 'src'),
    },
  },
});

3. Install and support Babel, JSX, Less, SCSS

// 
const { defineConfig } = require('@rsbuild/core');
const { pluginLess } = require('@rsbuild/plugin-less');
const { pluginSass } = require('@rsbuild/plugin-sass');
const { pluginBabel } = require('@rsbuild/plugin-babel');
const { pluginVue2Jsx } = require('@rsbuild/plugin-vue2-jsx');


export default defineConfig({
    plugins: [
        ...,
        pluginBabel({
          include: /\.(?:jsx|tsx)$/,
          // exclude: /[\\/]node_modules[\\/]/,
        }),
        pluginVue2Jsx(),
        pluginLess({
          lessLoaderOptions: {
            lessOptions: {
              javascriptEnabled: true,
              math: 'always',
            },
          },
        }),
        pluginSass(),
    ],
});

When using JSX, you need to<script>Tag specificationlangAttributes, can be globally<script>Replace with<script lang="jsx">。

<script lang="jsx">
export default { 
    render() { 
        return <div>123</div>; 
    }, 
};

Or use the script to scan itscr Used in the directory JSX of vuedocument.

import { readFile, writeFile } from 'fs/promises';
import { globby } from 'globby';
import ts from 'typescript';

async function run() {
  const paths = await globby('src', {
    expandDirectories: {
      extensions: ['vue'],
    },
  });

  for (const path of paths) {
    const file = await readFile(path, { encoding: 'utf8' });
    const contentArr = ('\n');
    const start = ((item) => ('<script>'));
    const end = ((item) => ('</script>'));
    if (start === -1) continue;
    const scriptContent = (start + 1, end).join('\n');
    const result = (scriptContent, {
      compilerOptions: { module: , jsx: 'react' },
    });
    if (('')) {
      await writeFile(path, ('<script>', '<script lang="jsx">'), { encoding: 'utf8' });
    }
  }
}

run();

rsbuild is built in LESS 4.styleMust specifyscopedAttributes, need to be/deep/Replace with::v-deep, can be replaced globally.

<style src="./" lang="less" scoped></style>

// 
//.drawer /deep/.ant-drawer-body{
//  padding: 0 24px !important;
//}

.drawer ::v-deep .ant-drawer-body{
  padding: 0 24px !important;
}

parameter

The cli of rsbuild intercepts unrecognized parameters, sovue-cli-service serve --oem=xxxSuch a command will report an error under rsbuild. We need to pass in custom command line parameters like thisrsbuild dev -- --oem=xxx。

5. Environment variables

rsbuild will only inject by defaultPUBLIC_The environment variables at the beginning, in order to be compatible with the behavior of Vue CLI, and to read other custom environment variables, you need to use itloadEnvLoadVUE_APP_The environment variable at the beginning and passesConfiguration.

// 
const { defineConfig, loadEnv } = require('@rsbuild/core');
const { publicVars: vueEnvs } = loadEnv({ prefixes: ['VUE_APP_'] });

export default defineConfig({
  source: {
    define: {
      ...vueEnvs,
      '': {
        // ...,
        OEM: ()
      },
    },
  },
});

Template variables

Will<%= BASE_URL %>Replace with<%= assetPrefix %>/, be careful to add a slash at the end. The remaining variables can be usedTo set it

// 
const { defineConfig } = require('@rsbuild/core');
const { version } = require('./');

export default defineConfig({
    html: {
        template: './public/',
        templateParameters: {
          version,
          title: .VUE_APP_SYSTEM_NAME
        },
      },
});

7. Turn on HTTPS service

const { defineConfig } = require('@rsbuild/core');
const { pluginBasicSsl } = require('@rsbuild/plugin-basic-ssl');

 = defineConfig({
  plugins: [
    ...,
    pluginBasicSsl(),
  ],

  server: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://10.1.1.139:19090',
        secure: false, // Set up a proxy that supports https protocol        pathRewrite: {
          '^/api': '',
        },
        // onProxyRes(proxyRes) {
        //   if (['set-cookie']) {
        //     ['set-cookie'] = ['set-cookie'].map((v) =&gt; {
        //       return ('Path=/edr', 'Path=/');
        //     });
        //   }
        // },
      },
    },
  },
});

8. Change the vue componentCompilerModify the writing method torenderWriting method.

When using ant-design, when customizing the icon, the way to write it in the document isCompilerMethod, and configuration is requiredruntimeCompiler: true, this writing method is not supported in rsbuild, it needs to be changed torenderWriting method.

const ProtectiveLogSvg = {
  template: `&lt;svg t="1666607819931" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http:///2000/svg" p- width="200" height="200"&gt;&lt;path d="M512 64c0 0-44.416 111.936-328.448 111.936l0 458.88C183.552 816.192 512 960 512 960s328.448-143.808 328.448-325.184l0-458.88C555.392 175.936 512 64 512 64zM510.656 494.656 224.768 494.656 224.768 217.984c223.936 0 277.504-79.488 285.952-95.168L510.72 494.656zM799.232 619.456c0 158.528-286.784 284.224-287.232 284.416L512 494.656l287.232 0L799.232 619.456z" p-&gt;&lt;/path&gt;&lt;/svg&gt;`,
};

const ProtectiveLogIcon = {
  template: `
    &lt;a-icon :component="ProtectiveLogSvg" /&gt;
  `,
  data() {
    return {
      ProtectiveLogSvg,
    };
  },
};


Replace with：


const ProtectiveLogSvg = {
  name: 'ProtectiveLogSvg',
  functional: true,
  render() {
    return (
      &lt;svg
        t="1666607819931"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http:///2000/svg"
        p-&gt;
        &lt;path
          d="M512 64c0 0-44.416 111.936-328.448 111.936l0 458.88C183.552 816.192 512 960 512 960s328.448-143.808 328.448-325.184l0-458.88C555.392 175.936 512 64 512 64zM510.656 494.656 224.768 494.656 224.768 217.984c223.936 0 277.504-79.488 285.952-95.168L510.72 494.656zM799.232 619.456c0 158.528-286.784 284.224-287.232 284.416L512 494.656l287.232 0L799.232 619.456z"
          p-&gt;&lt;/path&gt;
      &lt;/svg&gt;
    );
  },
};

const ProtectiveLogIcon = {
  name: 'ProtectiveLogIcon',
  functional: true,
  render(h) {
    return h('a-icon', { props: { component: ProtectiveLogSvg } });
  },
};

9. Remove unnecessary files

The migration speed of package and compilation has increased by about 5 times from 30s to 6s, and the hot reload will take effect after basically changing it. Finally, if there are any mistakes, please point them out.

Complete configuration

const { defineConfig, loadEnv } = require('@rsbuild/core');
const { pluginVue2 } = require('@rsbuild/plugin-vue2');
const { pluginBabel } = require('@rsbuild/plugin-babel');
const { pluginVue2Jsx } = require('@rsbuild/plugin-vue2-jsx');
const { pluginLess } = require('@rsbuild/plugin-less');
const { pluginSass } = require('@rsbuild/plugin-sass');
const { pluginBasicSsl } = require('@rsbuild/plugin-basic-ssl');
const path = require('path');
const { version } = require('./');

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

 = defineConfig({
  html: {
    template: './public/',
    templateParameters: {
      version,
      title: .VUE_APP_SYSTEM_NAME,
    },
  },
  
  plugins: [
    pluginBasicSsl(),
    pluginVue2(),
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
      // exclude: /[\\/]node_modules[\\/]/,
    }),
    pluginVue2Jsx(),
    pluginLess({
      lessLoaderOptions: {
        lessOptions: {
          javascriptEnabled: true,
          math: 'always',
        },
      },
    }),
    pluginSass(),
  ],

  source: {
    define: {
      ...vueEnvs,
      '': {
        // ...,
      },
    },
    entry: {
      index: './src/',
    },
    alias: {
      '@': (__dirname, 'src'),
    },
  },

  server: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://10.1.1.139:19090',
        secure: false, // Set up a proxy that supports https protocol        pathRewrite: {
          '^/api': '',
        },
        // onProxyRes(proxyRes) {
        //   if (['set-cookie']) {
        //     ['set-cookie'] = ['set-cookie'].map((v) =&gt; {
        //       return ('Path=/edr', 'Path=/');
        //     });
        //   }
        // },
      },
    },
  },
});

The above is the detailed content of the detailed steps of Vue2 migration Rsbuild. For more information about Vue2 migration Rsbuild, please follow my other related articles!