vite：15个插件推荐_vite-plugin-html

1. vite-plugin-restart

通过监听文件修改，自动重启 vite 服务。

最常用的场景就是监听 vite.config.js 和 .env.development 文件，我们知道，修改 vite 配置文件和环境配置文件，是需要重启 vite 才会生效，通过这个插件，我们将从反复重启中解脱出来。

安装

npm i vite-plugin-restart -D

配置：vite.config.ts

import ViteRestart from 'vite-plugin-restart'
export default {
  plugins: [
    ViteRestart({
      restart: [
        'my.config.[jt]s',
      ]
    })
  ],
};
1
2
3
4
5
6
7
8
9
10

2. unplugin-vue-components

组件自动按需导入。

安装：

npm i unplugin-vue-components -D

vite.config.ts

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()
      ],
    })
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

原先引用组件的时候需要在目标文件里面import相关组件，现在就可以直接使用无需在目标文件import了，注意大小写，组件都是大写开始的。

3. 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

vite.config.ts

import styleImport, {
  // AndDesignVueResolve,
  VantResolve,
  // ElementPlusResolve,
  // NutuiResolve,
  // AntdResolve
} from 'vite-plugin-style-import'


export default  ({ mode }) => defineConfig({
  plugins: [
    styleImport({
      resolves: [
        // AndDesignVueResolve(),
        VantResolve(),
        // ElementPlusResolve(),
        // NutuiResolve(),
        // AntdResolve()
      ],
    })
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

注释部分为常用的UI组件库，按照自己的需要引入。

4. unplugin-auto-import

vue3等插件 hooks 自动引入

支持vue, vue-router, vue-i18n, @vueuse/head, @vueuse/core等自动引入

效果

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

//引入后
const count = ref(0)
const doubled = computed(() => count.value * 2)
1
2
3
4
5
6
7
8

安装

npm i unplugin-auto-import -D

vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'
export default  ({ mode }) => defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'vuex', '@vueuse/head'],
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
      dts: 'src/auto-import.d.ts'
    }),
  ]
})
1
2
3
4
5
6
7
8
9
10

5. vite-plugin-svg-icons

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

按照文档配置好后，搭配阿里巴巴矢量图标库使用，只需把下载好的 svg 文件丢到指定目录，然后就可以项目中愉快的使用了。

安装：

npm i vite-plugin-svg-icons -D

vite.config.ts配置

import { defineConfig,loadEnv } from 'vite'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
const path = require("path");
export default  ({ mode }) => defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // Specify the icon folder to be cached
      iconDirs: [path.resolve(process.cwd(), 'src/svg')],
      // Specify symbolId format
      symbolId: 'icon-[dir]-[name]'
    })
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

main.ts添加

import 'virtual:svg-icons-register'
1

新建svgIcon.vue

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :href="symbolId" />
  </svg>
</template>

<script setup lang="ts" name="SvgIcon">
  import { computed } from 'vue'
  const props = defineProps({
    prefix: {
      type: String,
      default: 'icon'
    },
    name: {
      type: String,
      required: true
    },
  })
  const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
<style scope>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.1em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
    fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
    overflow: hidden;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在目录src下新建svg文件夹，在阿里巴巴矢量图标库 下载order.svg图标，放入svg文件夹内。

使用：

<template>
  <div class="home">
    <svg-icon name="order" class="icon"></svg-icon>
  </div>
</template>

<script setup lang="ts">
// 示例使用了unplugin-vue-components/vite插件自动引入自定义组件
</script>

<style lang="less" scoped>
.icon{
  font-size: 200px;
  color: #ff0000;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6. vite-plugin-html

一个针对 index.html，提供压缩和基于 ejs 模板功能的 vite 插件。

通过搭配 .env 文件，可以在开发或构建项目时，对 index.html 注入动态数据，例如替换网站标题。

安装：

npm i vite-plugin-html -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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

vite.config.ts

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 标签，原有标签需要删除
       * @default src/main.ts
       */
      entry: '/src/main.ts',
      /**
       * 需要注入 index.html ejs 模版的数据
       */
      inject: {
        data: {
          // 查找.env.test文件里面的VITE_PROJECT_TITLE，请以VITE_标识开头
          title: loadEnv(mode, process.cwd()).VITE_PROJECT_TITLE, 
          injectScript: `<script src="/inject.js"></script>`,
        },
      },
    })
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

7. vite-plugin-compression

使用 gzip 或者 brotli 来压缩资源。

安装

npm i vite-plugin-compression -D

vite.config.ts

import { defineConfig,loadEnv} from 'vite'
import viteCompression from 'vite-plugin-compression';
export default  ({ mode }) => defineConfig({
  plugins: [
    viteCompression()
  ]
})
1
2
3
4
5
6
7

8. vite-plugin-imagemin

打包压缩图片

安装

npm i vite-plugin-imagemin -D

国内用户安装需要在电脑host文件（C：\Windows\System32\drivers\etc）上加下以下配置：

199.232.4.133 raw.githubusercontent.com

我自己安装的时候发现还是不行，然后还是选择了他不推荐的cnpm安装成功了- -

我发现我的4M图片压缩后，文件被旋转了90度，这？

import { defineConfig,loadEnv} from 'vite'
import viteImagemin from 'vite-plugin-imagemin'
export default  ({ mode }) => defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { // gif图片压缩
        optimizationLevel: 3, // 选择1到3之间的优化级别
        interlaced: false, // 隔行扫描gif进行渐进式渲染
        // colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。
      },
      optipng: { // png
        optimizationLevel: 7, // 选择0到7之间的优化级别
      },
      mozjpeg: {// jpeg
        quality: 20, // 压缩质量，范围从0(最差)到100(最佳)。
      },
      pngquant: {// png
        quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。
        speed: 4, // 压缩速度，1(强力)到11(最快)
      },
      svgo: { // svg压缩
        plugins: [
          {
            name: 'removeViewBox',
          },
          {
            name: 'removeEmptyAttrs',
            active: false,
          },
        ],
      },
    }),
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

9. vite-plugin-purge-icons

此插件是可以让我们很方便高效的使用Iconify中所有的图标（本人表示没有用过…）。

10. @vitejs/plugin-vue-jsx

此插件支持在vue3中使用jsx/tsx语法

安装

npm i @vitejs/plugin-vue-jsx

vite.config.ts

import { defineConfig,loadEnv} from 'vite'
import vuejsx from "@vitejs/plugin-vue-jsx"
export default  ({ mode }) => defineConfig({
  plugins: [
    vuejsx()
  ]
})
1
2
3
4
5
6
7

jsx文件：
（jsx组件中自动跳过生命周期，即jsx中没有生命周期，在父组件onBeforeMount后执行）

const component = (props:any,context:any) => {
  console.log(props)
  const onClick = () => { 
    context.emit('update')
  }
  return <div
    style={{
      fontSize: 12,
      color: '#999'
    }}
    onClick={()=>onClick()}
  >
    我是jsx函数组件{props.text}
  </div>
}

export default component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

11. vite-plugin-vue-setup-extend

setup语法糖name增强，使vue3语法糖支持name属性。

vue3语法糖默认是没有name属性的，在我们使用keep-alive的时候需要用到name。

安装

npm i vite-plugin-vue-setup-extend -D

vite.config.ts

import { defineConfig} from 'vite'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
export default  ({ mode }) => defineConfig({
  plugins: [
    vueSetupExtend()
  ]
}
1
2
3
4
5
6
7

使用

<script setup lang="ts" name="home">
</script>
1
2

12. vitejs-plugin-legacy

Vite默认的浏览器支持基线是原生ESM。该插件为不支持原生ESM的传统浏览器提供支持。

13. @vitejs/plugin-vue

vite支持vue开发

14. vite-plugin-vue-images

自动导入图像，同级目录的文件名不能重复！

安装

npm i vite-plugin-vue-images -D

vite.config.ts

import { defineConfig,loadEnv} from 'vite'
import ViteImages from 'vite-plugin-vue-images'
export default  ({ mode }) => defineConfig({
  plugins: [
    ViteImages({
      dirs: ['src/assets'], // 图像目录的相对路径
      extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'], // 有效的图像扩展
      customResolvers:[], // 覆盖名称->图像路径解析的默认行为
      customSearchRegex: '([a-zA-Z0-9]+)', // 重写搜索要替换的变量的Regex。
    }),
  ]
1
2
3
4
5
6
7
8
9
10
11

假设有以下文件及路径

logo.png： src/assets/logo.png

name1.jpg： src/assets/test/name1.jpg

使用方式：

<template>
  <div class="home">
    <img :src="Logo"  />
    <img :src="TestName1"  /> 
  </div>
</template>

<script setup lang="ts">
</script>

<style lang="less" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12

插件将转换为：

<template>
  <div class="home">
    <img :src="Logo"  />
    <img :src="TestName1"  /> 
  </div>
</template>

<script setup lang="ts">
import Logo from '@/assets/logo.png'
import TestName1 from '@/assets/test/name1.jpg'
</script>

<style lang="less" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

15. vue-global-api

unplugin-auto-import插件的继承者，解决因为它的自动导入导致的eslint报错

安装

npm i vue-global-api

main.ts添加

import 'vue-global-api'
1