use of vite

private blog

Xu Xiaomo's Blog - Vegetable chicken blog direct train

The full version of the series of articles has more pictures. CSDN blog post pictures need to be uploaded manually, so there are fewer pictures in the article.

Series Article Directory

Front-end series of articles - Portal
Back-end series of articles - Portal

---

---

fast

The packaging tool developed by You Yuxi team, similar to webpack, is exclusively used by vue, and its purpose is to replace webpack.

Compare webpack:

The webpack package is as follows:

The package of vite is as follows:

From the above two pictures, we can see why the vue project packaged by webpack is very slow, while vite has a better user experience.

The implementation principle of vite is to use the feature of ES6 import to send requests to load files, intercept these requests, do some pre-compilation, and save the lengthy packaging time of webpack.

Create project command:

npm create vite@latest my-vue-app -- --template vue

When you use it for the first time, you will be prompted whether to install creat-vite, press Enter to confirm, this is the creation tool of vite.

Next, vite will prompt, let us choose what framework to install, and then choose whether to install ts.

Then the project is installed.

Start command:

"scripts": {
    
    
    "dev": "vite --open --port 8888",
    "build": "vite build",
    "preview": "vite preview --open"
}

preview is to start the packaged project.

Note: For projects installed in this way, there is no vue-router, no vuex, and everything needs to be manually configured.

Choose to create a configured project:

npm init vue

By default, we cannot use the path as src in the vue project @, it needs to be configured, in vite.config.js:

import {
    
    resolve} from 'path'
在 ts 模块中加载 node 核心模块，需要安装 node 的类型补充模块：npm i @types/node
// 配置
export default defineConfig({
    
    
  plugins: [vue()],
    resolve: {
    
    
        alias: {
    
    
            '@': resolve(__dirname, 'src')
        }
    }
})

server configuration:

export default defineConfig({
    
    
  server: {
    
    
      open: true,
      port: 端口号,
      proxy: {
    
    
          '/api': {
    
    
            target: 'http://jsonplaceholder.typicode.com',
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, ''),
          },
          '/foo': 'http://localhost:4567',
          
      }
  }
})

---

Note

A large number of pictures are missing in this blog post, which seriously affects the integrity of the content and the reading experience. For the full content, please go to my vegetable blog—— Xu Xiaomo's Blog