Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to add vite support for the old vue project", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to add vite support for the old vue project" this article.

1. Preface

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

Vite, a web development tool developed by vue author you Yuxi, has the following characteristics:

Fast cold start

Instant module hot update

True on-demand compilation

2. Start the upgrade

Note: only after upgrading the development environment, packaging is still webpack (I have also tried to package and use vite, but after packaging, I found that there is a problem with the font icon of iview. Preliminary verification is the problem of static resources. The static resources packaged by vite are put under assets by default. If you have a solution, please let us know the solution.)

2.1 install the vuecli plug-in vite

Vue add vit # add vite plug-in

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

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

Students using pnpm, if there is no .npmrc file in the root directory of the project, please add your own and add shamefully-hoist=true; to the file, otherwise the installation of 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 because 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 the extensions in the default configuration of vite does not contain .vue; the solution:

1. Add extensions to vue.config

/ vue.config.jsmodule.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 of vite is 3000, so you need to add port:8080 to the devServer in vue.config.js

/ / vue.config.jsmodule.exports = {devServer: {port: 8080}} 2.2.4, Agent invalidation at development time

The reason for agent 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 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},},} } these are all the contents of the article "how to add vite support to an old vue project" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.