1, the preface

I have taken over a project of the company for two years, and now every time I start a project, it takes nearly one minute, and HMR also takes several seconds. But after vite2 was released, I saw the dawn, but I have not started to upgrade. Yesterday, I finally couldn’t resist, and the upgrade was completed in a few seconds.

2. Start the upgrade

Note: I just upgraded the development environment, but the packaging is still Webpack (I also tried to use Vite for packaging, but I found there was a problem with the font icon of iView after packaging, which was initially verified to be the problem of static resources, the static resources after vite packaging are put under Assets by default, if you have a solution, please inform me of the solution)

V2.1 Install vuecli plug-in Vite

vue add vite # Add vite plugin
Copy the code

After the plug-in is installed, add the following script to package.json:

{
    "script": {
        "vite": "node ./bin/vite"}}Copy the code

If you use PNPM, if you don’t have a.npMRc file at the root of your project, please shamefully add the hoist=true; Otherwise, installing the Vite plug-in may fail.

2.2. Run the project and check for errors

2.2.1, TypeError: Cannot read property ‘alias’ of undefined

This error is caused by the fact that configureWebpack in vue.config.js can only use object configuration methods (vue CLI supports both object and function methods).

2.2.2 Unrestricted file system access to “/ SRC /components/editPwd

The reason for this is that extensions in the vite default configuration do not contain. Vue; Solutions:

  • 1. Add extensions to vue.config
// vue.config.js
module.exports = {
    configureWebpack: {resolve: {extensions: [".mjs".".js".".ts".".jsx".".tsx".".json".".vue"]}}}Copy the code
  • 2. All VUE components are added during import.vueSuffixed name of.

2.2.3 Boot port is not 8080

The default startup port of vite is 3000, so you need to add port:8080 to devServer in vue.config.js

// vue.config.js
module.exports = {
    devServer: {port: 8080}}Copy the code

2.2.4 Agent failure during development

The proxy fails because the rewrite configuration in Vuecli is pathRewrite, whereas in Vite it is rewrite.

Solutions:

module.exports = {
    devServer: {
        port: 8080.proxy: {
            "/api/cost/": {
                target: "http://localhost:9331".changeOrigin: true.pathRewrite: {
                    "^/api/cost/": "/",},rewrite: path= > path.replace(/^\/api\/cost\//."/"), / / vite
            },
            "/api/import/": {
                target: "http://localhost:9332".changeOrigin: true.pathRewrite: {
                    "^/api/import/": "/",},rewrite: path= > path.replace(/^\/api\/import\//."/"), / / vite
            },
            "/api/": {
                target: "http://localhost:9333".ws: true.changeOrigin: true.pathRewrite: {
                    "^/api/": "/",},rewrite: path= > path.replace(/^\/api\//."/"), / / vite}},}},Copy the code

3. The upgrade is complete

At this point, the whole upgrade process is over. Generally speaking, it is relatively smooth without too many pits, which are some relatively easy to solve problems. Finally thank the audience master can see the last O(∩_∩)O HOPE you can gain 😁