How to add Vite support to old Vue projects

1. Introduction

I have taken over a project of the company for two years. Now it takes nearly 1 minute to start the project every time, and HMR takes several seconds. But after the release of Vite2, I saw the light, but I never upgraded it. Yesterday, I finally couldn't help it, and it was completed in seconds after the upgrade.

vite is a web development tool developed by Vue author Yuxi You. It has the following features:

Fast cold start

Instant module hot update

True on-demand compilation

2. Start the upgrade

Note: I just upgraded the development environment, and webpack is still used for packaging (I also tried to use vite for packaging, but after packaging, I found that there was a problem with the font icon of iview. Preliminary verification showed that it was a problem with static resources. The static resources packaged by vite are placed under assets by default. If anyone has a solution, please let me know the solution)

2.1 Install the vuecli plugin vite

vue add vit # Add vite plugin

After the plugin is installed, it will be added to the script in package.json:

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

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

2.2. Run the project and troubleshoot errors

2.2.1、TypeError: Cannot read property 'alias' of undefined

This error is because configureWebpack in vue.config.js can only use the object configuration method (vue cli supports both objects and functions)

2.2.2 Unrestricted file system access to "/src/components/editPwd

The reason for this problem is that the extensions in the default configuration of vite do not contain .vue; Solution:

1. Add extensions in vue.config

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

2. Add the suffix .vue to all vue components when importing.

2.2.3. The startup 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
    }
}

2.2.4. Proxy failure during development

The reason for the proxy failure: the rewrite configuration in vuecli is pathRewrite, while in vite it 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\//, "/"), // Adapt to vite
            },
            "/api/import/": {
                target: "http://localhost:9332",
                changeOrigin: true,
                pathRewrite: {
                    "^/api/import/": "/",
                },
                rewrite: path => path.replace(/^\/api\/import\//, "/"), // Adapt to vite
            },
            "/api/": {
                target: "http://localhost:9333",
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    "^/api/": "/",
                },
                rewrite: path => path.replace(/^\/api\//, "/"), // Adapt to vite
            },
        },
    },
}

3. Upgrade completed

The entire upgrade process is now over. Overall, it was relatively smooth without too many pitfalls, and most of them were problems that were relatively easy to solve.

This is the end of this article on how to add vite support to old vue projects. For more relevant content on adding vite to old vue projects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!