Vue CLI Best practices for Modifying Vite

Objectives and environment

The project adopts vue2 + ANTDV1 + VUE-CLI B-side project. The goal is to transform the dev environment to support both Vite and Webpack, and the production environment to support Webpack. Here, we need to modify the code and configuration to be able to use both Webpack and Vite. And minimize code changes to the SRC directory to ensure that the production environment does not have problems.

Comparison before and after reconstruction:

Build tools	Dev Startup Time	Hot update HMR
webpack	51s	5s
vite	17s(no prebuild) 600ms(pre-built)	500ms

Vite’s efficiency gains are significant in dev environments, but not in production environments.

Reform steps

Install vite related modules in the project root directory, including the plug-ins that will be used later, as follows:

Vite: "^1.0.6", "vite-plugin-externals": ^2.8.4", "vite-plugin-externals": "^ 0.4.0 vite", "- the plugin - filter - replace" : "^ 0.1.9", "vite - plugin - importer" : "^ 0.2.5", "vite - plugin - replace" : ^ "" while," "vite plugin - restart" : "^ while", "vite - plugin - vue2" : "^ 1.9.3", "@ originjs/vite - plugin - commonjs" : "^ 1.0.3", "@ vue/Babel - helper - vue - JSX - merge - props" : "^ 1.2.1", "@ vue/Babel - preset - JSX" : "^ 1",Copy the code

Create the vite. Config. js file and index.html file required by vite and add the corresponding configuration.

Specific configuration and step pit point

require is not defined

In Vite development mode, ESM is completely installed for construction, and the require syntax originally used in Webpack cannot be recognized. To solve this problem, there are the following solutions:

1. Replace with import

: < img SRC = "the require ('/Amy polumbo ng ')" / > / / replace for const a = import ('/Amy polumbo ng ') < img SRC = "a" / >Copy the code

2. using@originjs/vite-plugin-commonjsThe plug-in

import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs'; . Plugins: [viteCommonjs({transformMixedEsModules: true, // if the project uses require and import, configure true}),]...Copy the code

Note that vite in production uses commonjsOptions to convert require by default. This plugin will only work in dev. We recommend importing XXX instead, which is compatible with vue CLI webpack.

Unknown theme type: undefined, name: undefined(and-design-vue)

The following figure shows the error:

Because the version of AND-design-vue is too low, part of the code does not support native ESM. There are the following solutions.

1. Upgrade to ant-Design-VUE-1.7.8 Stable.
2. Configuration alias

Resolve: {// configure path alias alias: [{find: /ant-design-vue$/,replacement: 'ant-design-vue/dist/antd.min'},],},Copy the code

It is recommended to adopt the first option and fully introduce and-design-vue, which is also compatible with the Webpack of the Vue CLI.

A. Vue file and a. Vue file with JSX syntax could not be recognized

The following figure shows the error:

Add the following configuration to solve the problem:

import { createVuePlugin } from 'vite-plugin-vue2'

...
plugins: [
    createVuePlugin({
        jsx: true
    }),
]
...
resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
Copy the code

In the corresponding Vue file using JSX syntax, modify:

<script> // replace with <script lang=" JSX ">Copy the code

Note that @vue/ babel-PRESET – JSX and @vue/ babel-helper-vuE-jsx-merge-props need to be installed for compatibility in the Vue CLI webpack as well

‘isMoment’ is not exported by ‘node_modules..

This problem is reported on components that use ant-design-vue because the underlying ANTD reference moment reads:

import * as moment from "moment";
Copy the code

The solution is to use vite plugin vite-plugin-antDV1-Momentjs-resolver, configuration is as follows:

import AntdMomentResolver from "vite-plugin-antdv1-momentjs-resolver";

plugins: [
    AntdMomentresolver()
],
Copy the code

Note that if you are using CNPM installed ant-design-vue, you need to pass in the reg argument: /[email protected]@ant-design-vue\\[\w-\\ /]*\.js$/

process is not defined

In the Vue CLI, we use process.env to get environment variables, but they are not recognized in Vite. We can replace the plugin with Vite and replace it at build time as follows:

import { replaceCodePlugin } from "vite-plugin-replace"; . replaceCodePlugin({ replacements: [ { from: /process.env/g, to: "import.meta.env", }, ], }),Copy the code

This solution is also compatible with vue CLI webpack.

The env variable

In the Vue CLI webpack, some variables are used, such as:

VUE_APP_BUILD_ENV='test'
VUE_APP_BASE_GRAIN_API='/dg-grain-api'
VUE_APP_BASE_GANG_API='/dg-steel-api'
VUE_APP_BASE_USER_API='/dg-user-api'
Copy the code

In Vite, only variables starting with vite can be used. In order to be compatible with both solutions, envPrefix can be configured as follows:

defineConfig({
    envPrefix: 'VUE_APP_',
})
Copy the code

/deep/ Expected selector using [plugin:vite: CSS]

The following figure shows the error:

1. will<style lang="scss">Replace with<style lang="less">.
2. will/deep/Replace with::v-deep.

If less is not used in the project, it is safer to use the latter. If :: V-deep warnings are replaced, use:

:deep(.child) {
    color: red;
}
Copy the code

Note that vite does not have a sass parser by default, you need to install NPM install sass -d

Stylus and less global variables

Inline JavaScript is not enabled. Is it set in your options?

The following figure shows the error:

The problem is that the stylus or less global variable is used in the project. There are the following solutions:

PreprocessorOptions: {less: {modifyVars: {// Set ant-design-vue theme color here etc. 'primary-color': '#0053db', 'success-color': '# 52C41A ',}, // Support inline JavaScript JavaScript: true,}, stylus: {imports: [path.resolve(__dirname, 'SRC /assets/styl/fun.styl')],// For the suffix name. Stylus infuses global variables}, styl: {imports: [path.resolve(__dirname, 'SRC /assets/styl/fun.styl')],Copy the code

ESM third-party libraries are not supported

In the project, some third-party dependency packages are more or less used. Because the dependency packages are not written in accordance with ESM, the startup or packaging error is the most common problem. In the development environment, you can use @Originjs/vite-plugin-commonJS conversion, but for some abnormal writing method, Contrib-hls. Js: contrib-contrib-hls. Js: contrib-contrib-hls. Js: contrib-contrib-hls.

To solve this problem, you can use Externals and configure the following parameters:

import { viteExternalsPlugin } from 'vite-plugin-externals'
...
plugins: [

    viteExternalsPlugin({
        'video.js': 'videojs',
    }),
]

Copy the code

In index.html, as follows:

< script SRC = "https://cdnjs.cloudflare.com/ajax/libs/video.js/6.0.0/video.min.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.js" > < / script >Copy the code

conclusion

Vite has significant performance improvement in dev, experience is rapid, but the request page in the browser, will be loaded at the same time a large number of js file, which leads to have some sacrifice in speed and webpack does much slower in the building, and file the slower the more of the project, but once built, the browser side is faster than vite experience. In addition, even if Vite uses rollup to package files in production environment, it still does not support IE well, and the production packaging speed is basically the same as WebPack. In short, if the project is stable and large, it is not recommended to change to Vite.

Related configuration source: github.com/lvming68160…