Vite 插件篇：提高开发效率！

unplugin-auto-import

vue3 等插件 hooks 自动导入，支持 vue，vue-router 等自动引入。

npm i unplugin-auto-import -D

import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
  plugins: [
    AutoImport({
      imports: ["vue"],
    }),
  ],
});

<script setup>
  let a = ref(true);
</script>

等价于

<script setup>
  import { ref } from "vue";
  let a = ref(true);
</script>

unplugin-vue-components

组件自动按需导入。

这个插件基本可以让我们告别全局注册，因为有时候为了偷懒，我们会将组件注册到全局，这样在使用的时候就无需导入并注册，弊端就是如果全局组件过多会导致首页加载较慢，而这个插件就很巧妙的解决了这个问题。

npm i unplugin-vue-components -D

// 配置
import { defineConfig } from "vite";
import Components from "unplugin-vue-components/vite";
export default defineConfig({
  plugins: [Components()],
});

<template>
  <div>
    <HelloWorld msg="Hello Vite 3.0" />
  </div>
</template>
<script setup></script>

等价于

<template>
  <div>
    <HelloWorld msg="Hello Vite 3.0" />
  </div>
</template>
<script setup>
  import HelloWorld from "../components/HelloWord.vue";
</script>

vite-plugin-vue-images

自动导入图片。

npm install vite-plugin-vue-images --save-dev

// vite.config.js
import { defineConfig } from "vite";
import ViteImages from "vite-plugin-vue-images";
export default defineConfig({
  plugins: [
    ViteImages({
      // 图像目录的相对路径
      dirs: ["src/assets/images"],
      // 图像扩展名
      extensions: ["jpg", "jpeg", "png"],
      customResolvers: [], // 覆盖名称->图像路径解析的默认行为
      customSearchRegex: "([a-zA-Z0-9]+)", // 重写搜索要替换的变量的Regex。
    }),
  ],
});

<template>
  <div>
    <img :src="yhtx">
  </div>
</template>
<script setup></script>

等价于

<template>
  <div>
    <img :src="yhtx">
  </div>
</template>
<script setup>
import yhtx from "@/assets/images/yhtx.png;
</script>

vite-plugin-vue-setup-extend

name属性简写

npm install vite-plugin-vue-setup-extend --save-dev

// vite.config.js
import { defineConfig } from "vite";
import VueSetupExtend from "vite-plugin-vue-setup-extend";
export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

// home.vue
<template>
  <h1>首页</h1>
</template>
<script setup name="home"></script>

等价于

// home.vue
<template>
  <h1>首页</h1>
</template>
<script setup></script>
<script>
export default {
  name: "home",
};
</script>

vite-plugin-mock

mock 数据，对前端来说，很多情况静态页面写好了，接口给了字段，要是有模拟的数据，页面开发完成，对接的时候只需要微调即可。

npm i vite-plugin-mock@2.9.6 --save-dev

// 配置
import { defineConfig } from "vite";
import { viteMockServe } from "vite-plugin-mock";
export default defineConfig({
  plugins: [
    viteMockServe({
      mockPath: "./mock", // 解析根目录下的mock文件夹
    }),
  ],
});

// mock/index.js
export default [
  {
    url: "/getNameList",
    method: "get",
    response: () => {
      return {
        success: true,
        data: {
          list: [
            { name: "赵云", age: 1000 },
            { name: "张飞", age: 2000 },
            { name: "关羽", age: 3000 },
            { name: "马超", age: 4000 },
            { name: "黄忠", age: 5000 },
          ],
        },
      };
    },
  },
];

<!-- 使用 -->
<script setup lang="ts">
import axios from "axios";
import { onMounted } from "vue";
onMounted(() => {
  axios({
    methods: "get",
    url: "/getNameList",
  }).then((res) => {
    console.log(res);
  });
});
</script>

效果：

vite-plugin-svg-icons

用于生成 svg 雪碧图，方便在项目中使用 .svg 文件。

npm i vite-plugin-svg-icons

// vite.config.js
import { defineConfig } from "vite";
const pathResolve = (dirPath) => path.resolve(process.cwd(), dirPath);
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定要缓存的文件夹
      iconDirs: [pathResolve("src/assets/image/svg")],
      // 指定symbolId格式
      symbolId: "[name]",
    }),
  ],
});

// main.js文件引入
import "virtual:svg-icons-register";

<!-- 封装svg-icon插件 -->
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use class="svg-use" :href="symbolId"></use>
  </svg>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  className: {
    type: String,
    default: "",
  },
});
const symbolId = computed(() => `#${props.name}`);
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`;
  }
  return "svg-icon";
});
</script>
<style lang="scss" scoped>
.svg-icon {
  /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和
  字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  vertical-align: -0.1em;
  /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前
  元素的color值，如果当前元素未设置color值，则从父元素继承 */
  fill: currentColor;
  overflow: hidden;
}
</style>

<!-- 使用 -->
<template>
  <div>
    <!-- 在src/assets/image/svg文件中必须存在button_group.svg图片 -->
    <svg-icon name="button_group"></svg-icon>
  </div>
</template>
<script setup>
  import svgIcon from "./svg-icon/index.vue";
</script>

vite-plugin-html

功能：HTML 压缩能力，EJS 模板能力，多页应用支持，支持自定义 entry，支持自定义 template。

使用场景：根据不同的环境变量，替换网站标题（CDN加速也用到了这个插件）。

npm i vite-plugin-html --save-dev

import { defineConfig, loadEnv } from "vite";
import { createHtmlPlugin } from "vite-plugin-html";
// 在html中获取环境变量
const getViteEnv = (mode, target) => {
  return loadEnv(mode, process.cwd())[target];
};
export default ({ mode }) =>
  defineConfig({
    plugins: [
      createHtmlPlugin({
        // 开启html压缩
        minify: true,
        // 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
        entry: "./src/main.js",
        // 如果你想把index.html文件放在指定的文件夹中，可以修改它，否则不用配置
        // template: "public/index.html"
        // 需要注入到index.html模板中的数据
        inject: {
          data: {
            // 环境变量中一定要有VITE_TITLE变量
            title: getViteEnv(mode, "VITE_TITLE"),
          },
        },
      }),
    ],
  });

index.html 中使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%- title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

rollup-plugin-visualizer

可视化打包工具，分析依赖模块的大小占比，可以让我们针对性的进行体积优化。

打包后项目根目录下会出现一个 status.html 文件

npm install rollup-plugin-visualizer --save-dev

// 配置
import { visualizer } from "rollup-plugin-visualizer";
export default defineConfig({
  plugins: [visualizer()],
});

效果：