Detailed explanation of how to add vite support to old vue project

1. Preface

It has been two years since I took over a project of the company. Now it takes nearly one minute to start the project every time, and it takes several seconds for hmr. After the release of but vite2, I saw the dawn, but I didn't start to upgrade it. I finally couldn't help it yesterday, and it was completed in a few seconds after the upgrade.

vite-An web development tool developed by vue author You Yuxi, has the following features:

Fast cold start

Instant module hot update

True compile on demand

2. Start upgrading

Note: Only the development environment has been upgraded, and the packaging is still webpack (I also tried to package and use vite, but after packaging, I found that there was a problem with the font icon of iview, and the preliminary verification was a problem with static resources. The static resources packaged by vite are placed under assets by default. If there is a solution, please tell me the solution)

2.1 Installing the vuecli plug-in vite

vue add vit #  Add vite Plug-ins 

After the plug-in is installed, it will be added in script in package. json:

{
    "script": {
        "vite": "node ./bin/vite"
    }
}

For students who use pnpm, if there is no. npmrc file in the root directory of the project, please add it yourself and add shamefully-hoist=true in the file; Otherwise, installing the vite plug-in may fail.

2.2. Run the project and troubleshoot errors

2.2. 1, TypeError: Cannot read property 'alias' of undefined

This error is due to 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 problem is that extensions in the default configuration of vite does not contain. vue; Solution:

1. Add extensions to vue. config

// vue.config.js
module.exports = {
    configureWebpack:{
        resolve:{
            extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
        }
    }
}

2. All vue components are imported with the suffix. vue.

2.2. 3, startup port is not 8080

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

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

2.2. 4, Agent Failure at Development Time

Reason for agent failure: The override configuration in vuecli is pathRewrite, and in vite is rewrite.

Solution:

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

3. Upgrade completed

At this point, the whole upgrade process is over. Generally speaking, it is relatively smooth without too many pits, which are all problems that are better solved.