Vue – vite2 cli migration

preface

Vite2.0 has been around for a while, and vite2.0 is more mature than 1.0 as a next-generation front-end tool using the browser’s native ESM.

Vite (French for “fast”, pronounced /vit/) is a new front-end build tool that dramatically improves the front-end development experience. In a word: fast.

  1. Cold start fast
  2. Hot update fast

Anyway, it’s fast.

Project background

This migration mainly tested the time management application of the data product line. The project has few requirements and contents, including about 1500 module files (including modules in node_modules), using the technology stack of VUe2 + vuex + vurRouter. Vue-cli (Webpack) is used to build the tool, which is a relatively standard VUE technology stack. Because the current data product line does not have the limitation of low version OF IE, so I made a try

The migration work

Here are some details about what to do and some of the potholes to step on during the migration

1. Add the vite configuration file

npm i -D vite
Copy the code

In vue-CLI, we use vue.config.js as the configuration file, while in Vite, we use vite.config.ts as the configuration file, the base file is

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    // ...
  ],
})
Copy the code

2. Import files

You also need to specify entry files in Vite. But unlike WebPack, in Vite, instead of specifying JS/TS as the entry point, you specify the actual HTML file as the entry point.

In Webpack, the user specifies the js package entry file by setting entry to js (e.g. SRC /app.js). HtmlWebpackPlugin injects the generated JS file path into HTML. Vite uses HTML files directly, parsing script tags in HTML to find the entry JS file.

Therefore, we add a script tag reference to the js/ts file in the entry HTML, move the index.html in public to the root directory, and modify it

<! DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="stylesheet" href="https://arena-alpha.oss-cn-hangzhou.aliyuncs.com/front/css/iconfont.css" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="//at.alicdn.com/t/font_2320026_5ytg5rao62v.css" /> <title>project</title> </head> <body> <noscript> <strong> We're sorry but application doesn't work properly without JavaScript enabled. Please enable it to continue. </strong> </noscript> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>Copy the code

To highlight the type = “module”

3. Use the Vue plug-in

Vite2.0 provides good support for VUE, and the coupling between vite2.0 and VUE or React is also very low. Vue projects can be built in the form of plug-ins. This time, vite-plugin-vue2 is selected to support Vue 2.0

import { defineConfig } from 'vite';
import { createVuePlugin } from "vite-plugin-vue2";
export default defineConfig({
  plugins: [
    createVuePlugin()
  ],
})
Copy the code
  1. Add aliases, proxies

In the project we will use some aliases to proxy the config file so we need to add them here as well

import { createVuePlugin } from "vite-plugin-vue2"; import { defineConfig } from "vite"; import path from "path"; let proxy = { '/config': {"target":"https://datamanage.dmp-sit.supaur.tech/","secure":true,"changeOrigin":true}, } export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "src"), "@lib": path.resolve(__dirname, "src/lib"), '@com': path.resolve(__dirname, "src/components/common") }, }, base: "/", server: {/ / proxy agent,}, plugins: [/ / vue () createVuePlugin ({)]});Copy the code

The above projects can be basically started, and then there are some pit steps

5. File name extensions

I searched the documentation and found extensions in the configuration to use, but

Resolve. Extensions type: string[] Default: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'] List of extension names that you want to omit when importing. Note that it is not recommended to ignore the extension of a custom import type (for example:.vue), as it interferes with the IDE and type support.Copy the code

So I added all the.vue by hand…

6. Dynamic import of asynchronous routes

Here I choose to change all asynchronous route imports to normal imports

7. The SASS global variable cannot be recognized

To inject custom global variables from outside, add them directly to the CSS option of viet.config. js

css:{ preprocessorOptions: { scss: { additionalData: `@import "./src/styles/variable.scss"; `}}}Copy the code

8. JSX file support (unresolved)

Vite2.0 has a separate plug-in support for Vue JSX, but currently the plug-in supports VUe3.0. The plug-in of VUe2 used before can import the parameters of Babel, but it does not solve my problem, there will always be errorsTherefore, a temporary avoidance scheme was adopted to rewrite side-menu.vue

The above basically completed the transformation of the project, Run!

contrast

vite webpack
Cold start ~1s ~23s
Hot update soon ~ 4.68 s
compile 28s ~45s

conclusion

Summary said, vite in use process, can greatly promote efficiency and experience, there is no use vite package deliverables to be deployed, don’t know how the actual deployment effect, and there are a lot of place to optimize did not try, if only as a tool to use of the development process, still can say is delicious. Subsequent vite can be launched source interpretation and scaffolding for Vue3.0 + TS + element3 + Vite