Used Vite for old vuE2 project development

1 Why use Vite

With the release of Vite by The University of Utah, the heat of community discussion remains high. People who have used it all say that it belongs to the kind of tool that can not be separated from the tool once, so what pain point vite solves in the end:

Using Webpack to develop projects, the start time of the project will be longer with the increase of the project volume, at least ten seconds or even one or two minutes, the most deadly hot update time is also very long, it takes half a day to write a line of code to see the effect, which greatly reduces the efficiency and happiness of development.

2Vite how it works

3 Non-invasive use of vite

In our old project, it was not practical to completely abandon Webpack and use Vite, 1 because the vite ecosystem was not mature enough, 2 because the retrofit cost was too high. Here we only use Vite for the old project development (webPack development is supported, of course, but there is only a new development tool, does not break the architecture of the original project), and use WebPack packaging.

1 Installation Dependencies

npm install vite -D
npm install vite-plugin-vue2 -D
npm install @originjs/vite-plugin-commonjs -D  
Copy the code

2 Create vite. Config. js in the root directory

import { defineConfig } from 'vite' import { createVuePlugin } from 'vite-plugin-vue2' import { resolve } from 'path' import { viteCommonjs } from "@originjs/vite-plugin-commonjs" export default defineConfig({ build:{ sourcemap:false }, plugins: [ createVuePlugin({ vueTemplateOptions: {} }), viteCommonjs({ exclude: ["lodash"], // Lodash does not need to be converted}),], resolve: {extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], alias: { '@': resolve('src'), } }, server: { host: '0.0.0.0, port: 8080, / / open:'/', / / automatically open in a browser proxy of the project: {'/API: {target: "', / / interface address changeOrigin: true, pathRewrite: { '^/api': '/api' } }, } }, })Copy the code

3 Create index. HTML in the root directory

Make a copy of the index.html file in the public directory and put it in the same directory. Add the following code (vite requires that index.html must be in the root directory)

<script type="module" src="/src/main.js"></script>
Copy the code

4package.json Adds startup code

"dev-vite": "vite",
Copy the code

5 Precautions

Vite does not support require import. You must use import in projects. (The introduction of @Originjs/vite-plugin-commonJS plug-in can be resolved, the top has been introduced, on demand use)

4 lessons