冰冻大西瓜的博客

Appearance

Vite 笔记 ​

警告

不建议在开发时用 Vite，打包时用 Webpack，这样会导致别名冲突，环境变量也会出问题，图片以及静态资源都会出现问题！

1. 快速开始 ​

安装脚手架：

bash
yarn create vite app
cd app
yarn

2. base 配置打包公共路径 ​

typescript
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [vue()],
});

为防止部署项目时发生资源路径访问错误的隐患，这里配置相对路径来避免发生。

3. alias 配置图片地址别名 ​

提示

ts 需要安装@types/node才能识别到node_modules文件夹下的模块

bash
yarn add @types/node

在vite.config.ts 文件中，设置别名配置：

typescript
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  resolve: {

    alias: {
      "@": resolve(__dirname, "src"),
      "@comp": resolve(__dirname, "src/components"),
    },
  },
  plugins: [vue()],
});

测试配置是否生效：

vue
// App.vue
<script setup lang="ts">
import HelloWorld from "@comp/HelloWorld.vue";
</script>
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

网页组件正常加载 ，说明别名配置成功

4. 构建生产版本移除 log 打印 ​

typescript
// vite.config.ts
export default defineConfig({
  ...
  build: {
    minify: 'terser', // 默认为esbuild
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境移除console
        drop_debugger: true // 生产环境移除debugger
      }
    }
  },
  ...
})

5. 打包输出文件夹配置 ​

未配置输出文件夹和配置了输出文件夹对比，配置后的结构更加清晰明了

typescript
// vite.config.ts
...
export default defineConfig({
  build: {
    ...
    rollupOptions: {
      output: { // 配置输出文件夹
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]'
      }
    }
  },
  ...
})

6. ElementPlus 按需引入 ​

7. 配置 Vite 的局域网访问 ​

typescript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
...
export default defineConfig({
  ...
  server: {
    host: '0.0.0.0'
  },
  ...
})

8. mock 数据 ​

8.1 安装模块 ​

bash
yarn add -D vite-plugin-mock mockjs
yarn add axios

vite-plugin-mock

快速开始

8.2 配置文件 ​

typescript
// vite.config.ts
...
// 引入Mock插件
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  ...
  plugins: [
    vue(),
    ...
    viteMockServe({
      // 数据模拟
      mockPath: 'mock'
    })
  ],
  ...
})

在根目录新建mock文件夹，在其中新建index.ts文件

typescript
// index.ts
import { MockMethod } from "vite-plugin-mock";
import { mock } from "mockjs";

const info = mock({
  // 'name|10': [() => Random.cname()] // 第一种方法
  "name|10": ["@cname"], // 第二种方法，无区别
});
export default [
  {
    url: "/api/get",
    method: "get",
    response: ({ query }) => {
      return {
        code: 200,
        info,
      };
    },
  },
] as MockMethod[];

8.3 在组件中请求数据 ​

9.代理跨域 ​

10. 配置开发环境和生产环境变量 ​

在根目录创建两个文件.env.development(开发环境配置文件）和.env.production(生产环境配置文件）

typescript
// .env.development
VITE_BASE_API = "/mocks/get";
typescript
// .env.production
VITE_BASE_API = "https://v1.hitokoto.cn/?c=f&encode=text";

在 App.vue 中修改请求地址：

vue
<script setup lang="ts">
import HelloWorld from "@comp/HelloWorld.vue";
import axios from "axios";
async function fn() {
  const { data } = await axios.get(import.meta.env.VITE_BASE_API as string);
  console.log(data);
}
fn();
</script>

效果展示：

11. CDN 引入 ​

安装模块 ​

bash
yarn add vite-plugin-cdn-import -D

修改vite.config.ts 文件

typescript
...
// 引入CDN插件
import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
...

export default defineConfig({
  ...
  plugins: [
    ...
    importToCDN({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://unpkg.com/vue@next'
        },
        {
          name: 'element-plus',
          var: 'ElementPlus',
          path: `https://unpkg.com/element-plus`,
          css: 'https://unpkg.com/element-plus/dist/index.css'
        }
      ]
    })
  ],
})

修改main.ts 文件：

typescript
import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";

createApp(App).use(ElementPlus).mount("#app");
// createApp(App).mount('#app')

CDN 引入与自动引入插件做对比 ​

12. GZIP 压缩 ​

安装插件:

bash
yarn add vite-plugin-compression -D

配置文件：

typescript
// vite.config.ts
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  ...
  plugins: [
  ...
  viteCompression(), // GZIP压缩
  ...
  ]
})

压缩前大小与压缩后大小对比

13. 打包图片 ​

13.1 安装模块 ​

bash
yarn add vite-plugin-imagemin -D

13.2 修改配置 ​

typescript
// vite.config.ts
// 引入图片压缩插件
...
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    ...
    viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false
        },
        optipng: {
          optimizationLevel: 7
        },
        mozjpeg: {
          quality: 20
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox'
            },
            {
              name: 'removeEmptyAttrs',
              active: false
            }
          ]
        }
    })
  ]
})

效果：

6MB 的图片打包压缩为 230kb