Vite 配置 - 常用插件

之恒君
1,254 阅读5分钟

查找插件：

需要用到的插件数组。

官方插件

社区插件

Vite Rollup 插件, 兼容的 Rollup 插件

unplugin, 用于构建工具的统一插件系统。

官方插件：

@vitejs/plugin-vue

  • 提供 Vue 3 单文件组件支持。

@vitejs/plugin-vue-jsx

@vitejs/plugin-vue2

  • 提供对 Vue 2 的单文件组件支持。

@vitejs/plugin-react

  • 使用 esbuild 和 Babel，使用一个微小体积的包脚注可以实现极速的 HMR，同时提升灵活性，能够使用 Babel 的转换管线。在构建时没有使用额外的 Babel 插件，只使用了 esbuild。

@vitejs/plugin-react-swc

  • 在开发时会将 Babel 替换为 SWC。在构建时，若使用了插件则会使用 SWC+esbuild，若没有使用插件则仅会用到 esbuild。对不需要标准 React 扩展的大型项目，冷启动和模块热替换（HMR）将会有显著提升。

@vitejs/plugin-legacy

  • 为打包后的文件提供传统浏览器兼容性支持。

常用插件：

vite-alias

  • 针对 vite4 做别名自动生成

  • 安装：npm i vite-aliases -D

  • 使用：

      // vite.config.js
  import { ViteAliases } from 'vite-aliases'

  export default {
          plugins: [
                  ViteAliases()
          ]
  };

  • Note:

    把这个添加到 package.json(插件仅适用于ESM)；

    {
  "type": "module"
}

    但是，这有可能会影响到其它非 ESM 包的使用；

    解决办法：

    1. 方式1：显示从 node_modules 引入
    // vite.config.js
import { ViteAliases } from './node_modules/vite-aliases'

// 此时使用的 version: "vite-aliases": "^0.11.0",
    1. 方式2：降级 vite-aliases 版本;

    issues 地址：

    // vite.config.js
import { ViteAliases } from 'vite-aliases'

// 此时使用的 version: "vite-aliases": "0.9.2"

unplugin-vue-components

  • 组件自动按需导入。
  • 安装：npm i unplugin-vue-components -D
  • 使用：
import Components from 'unplugin-vue-components/vite'
// ui库解析器，也可以自定义，需要安装相关UI库，unplugin-vue-components/resolvers
// 提供了以下集中解析器，使用的时候，需要安装对应的UI库，这里以vant示例
// 注释的是包含的其他一些常用组件库，供参考
import {
  // ElementPlusResolver,
  // AntDesignVueResolver,
  VantResolver,
  // HeadlessUiResolver,
  // ElementUiResolver
} from 'unplugin-vue-components/resolvers'

export default  ({ mode }) => defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'], // 目标文件夹
      extensions: ['vue','jsx'], // 文件类型
      dts: 'src/components.d.ts', // 输出文件，里面都是一些import的组件键值对
      // ui库解析器，也可以自定义，需要安装相关UI库
      resolvers: [
        VantResolver(),
        // ElementPlusResolver(),
        // AntDesignVueResolver(),
        // HeadlessUiResolver(),
        // ElementUiResolver()
      ],
    })
  ]
})
  • [NOTE]: 原先引用组件的时候需要在目标文件里面import相关组件，现在就可以直接使用无需在目标文件import了，注意大小写，组件都是大写开始的。

vite-plugin-style-import

  • 当你使用 unplugin-vue-components 来引入ui库的时候，message, notification，toast 等引入样式不生效。使用 vite-plugin-style-import，实现 message, notification，toast 等样式的自动引入;
  • 安装：npm i vite-plugin-style-import -D
  • 使用：
plugins: [

createStyleImportPlugin({
  resolves: [
    // VantResolve(), // 符合规范的用 *Resolve()  function 即可
  ],
  libs: [
    {
      libraryName: 'vant',
      esModule: false,
      // 不符合规范的话，就要用到 lib.resolveStyle 去处理了，
      // 如下 针对 vant4 的 toast style 样式的按需导入处理
      resolveStyle: (name) => { 
        // return `vant/es/${name}/style`;
        if (/\w+-toast/.test(name)) return `vant/es/toast/style`;
      },
    },

  ],
]

unplugin-auto-import

  • 为Vite,Webpack,Rollup和esbuild, 按需自动导入api, 有TypeScript支持。由unplugin提供。

  • 安装：npm i -D unplugin-auto-import

  • 使用：

    用前：

    import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

    用后：

    const count = ref(0)
const doubled = computed(() => count.value * 2)

vite-plugin-svg-icons

  • 用于生成 svg 雪碧图.
  • 安装：npm i vite-plugin-svg-icons -D
  • 使用：

=> vite.config.js 配置 vite-plugin-svg-icons:

// vite.config.js

import { resolve } from 'node:path'
// svg-icon插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig(({command, mode})=>{
	return {
		// ...其他配置
		plugins:[
			// ...其他配置
			createSvgIconsPlugin({
		        // 指定需要缓存的图标文件夹目录
		        iconDirs: [resolve(process.cwd(), 'src/assets/svgIcons')],
		        // 指定symbolId格式
		        symbolId: 'icon-[dir]-[name]',
		        //svgo额外配置，具体配置参考 https://github.com/svg/svgo
		        svgoOptions: {
		          plugins: [
		            {
                              // 移除 svg 原来的属性，解决后续我们组件给传值不生效问题
                              // 如果你能保证使用的 svg 都颜色等已经调整好的，后续不需要手动修改，那就不需要此项配置了
		              name: 'removeAttrs',
		              params: { attrs: ['class', 'data-name', 'fill', 'stroke'] }
	            	}
	          	]
	        }
	      })
		]
	}
})

=> 导入虚拟资源:

// main.js 
import 'virtual:svg-icons-register';

=> 创建 公共组件 SvgIcon.vue：

<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'red'
  }
})

const iconName = computed(() => `#icon-${props.name}`)
const svgClass = computed(() => {
  if (props.name) return `svg-icon icon-${props.name}`
  return 'svg-icon'
})
</script>

<style lang="less">
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
  overflow: hidden;
}
</style>

=> 导入 SvgIcon.vue；

  1. 可以作为全局组件导入；
import SvgIcon from '@/components/SvgIcon'
// ...其他
app.component('svg-icon', SvgIcon)
  1. 使用 unplugin-vue-components 配置按需导入, 参考官网 unplugin-vue-components；

=> 使用公共组件 SvgIcon.vue:

<svg-icon name="bed-king" color="green"></svg-icon>
<svg-icon name="car-standard"></svg-icon>
<svg-icon name="car-standard-16"></svg-icon>
<svg-icon name="vip"></svg-icon>

vite-plugin-html

  • 功能：

    1. HTML 压缩能力
    2. EJS 模版能力
    3. 多页应用支持
    4. 支持自定义entry
    5. 支持自定义template

  • 安装：npm i vite-plugin-svg-icons -D

  • 使用：

    // index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="./favicon.ico" />
    <link rel="stylesheet" href="./public/reset.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title><%- title %></title>
  </head>
  <body>
    <div id="app"></div>
    <%- injectScript %>
  </body>
</html>

    如：如搭配 .env 环境文件，做 index.html 做动态数据注入，如下：

    // vite.config.js
import { defineConfig,loadEnv} from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
export default  ({ mode }) => defineConfig({
    // mode 环境变量名，若配置有.env.test，启动时 --mode test，这里的mode就是test
  plugins: [
    createHtmlPlugin({
        minify: true,
        /**
         * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
         * [注]：这个 entry 要用绝对路径，相对路径会报错！
         * @default src/main.ts
         */
        // entry: 'src/main.js',
        entry: path.resolve(process.cwd(), 'src/main.js'),
        /**
         * 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
         * [注]： 这个 template，必须在没有root配置的情况下配置，而且使用绝对路径会注入失败！会找不到 index.html 页面, public 文件夹也会被干掉；
         * @default index.html
         */
        // template: path.resolve(process.cwd(), 'public/index.html'), // 使用绝对路径，会找不到 index.html 页面
        template: 'public/index.html',

        /**
         * 需要注入 index.html ejs 模版的数据
         */
        inject: {
          data: {
            title: 'index',
            injectScript: `<script src="./inject.js"></script>`,
          },
          tags: [
            {
              injectTo: 'body-prepend',
              tag: 'div',
              attrs: {
                id: 'tag',
              },
            },
          ],
        }
    })
  ]
})

  • 【NOTE】:

    1. 在多页面应用中，如果指定了root，vite-plugin-html会报错， 类似问题：github-issue#53
    2. entry 指定为绝对路径，如果指定的是 相对路径 build 时会报错；
    3. vite-plugin-html 配置项中的 template，必须在没有 root 配置的情况下配置，而且使用resolve绝对路径会注入失败！会找不到 index.html 页面, public 文件夹也会被干掉；

vite-plugin-compression

  • 功能：使用 gzip 或者 brotli 来压缩资源.
  • 安装：npm i vite-plugin-compression -D
  • 使用： 
    // vite.config.js
import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [viteCompression()],
  };
};

vite-plugin-vue-setup-name-support

  • 功能：vue3 setup 语法糖默认是没有 name 属性的，它的作用就是 使 vue3 setup 语法糖支持 name 属性。在我们使用 keep-alive 的时候需要用到name。

  • 安装：npm i vite-plugin-vue-setup-extend -D

  • 使用：

    // vite.config.js

import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [vue(), vueSetupExtend()],
})

    // SFC(单文件组件)

<template>
  <div>hello world {{ a }}</div>
</template>

<script lang="ts" setup name="App">
  const a = 1
</script>

  • [NOTE]: 一般在 @vitejs/plugin-vue 插件之后使用;

vite-plugin-cp

  • 功能：在构建包之后复制文件。
  • 安装：npm install vite-plugin-cp --save-dev
  • 使用： 
      import cp from 'vite-plugin-cp';

  export default defineConfig({
    plugins: [
      cp({
        targets: [
          { 
            src: '../../node_modules/three/build/three.min.js', dest: './dist'
          }
        ]
      })
    ]
  });
    效果： 
      ├── dist
  │   ├── three.min.js
avatar
文章
阅读
粉丝