Vite项目插件

 1、unplugin-vue-components 自动导入组件

      1.1 安装

npm i unplugin-vue-components -D

      1.2 自动导入ui库,该插件内置了大多数流行库解析器 Element Plus Ant Design Vue Vant Element UI Headless UI 

// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver,
  VantResolver,
  AntDesignVueResolver,
} from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      //导入自己的组件 指定组件位置，默认是src/components
      dirs: ['src/components', 'src/views'],
      // ui解析库
      resolvers: [
        ElementPlusResolver(),
        AntDesignVueResolver(),
        VantResolver(),
      ],
      //配置文件生成位置, 插件会生成一个自己组件路径的components.d.ts文件
      dts: './.components.d.ts'
      // 其他配置
      // ...
    })
  ]
})

2、unplugin-auto-import/vite 自动导入vue3的hooks

2.1 安装

npm i -D unplugin-auto-import

2.2 配置，默认在根目录生成auto-imports.d.ts文件，并将其添加到tsconfig.json include中

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      //自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
      eslintrc: {
        // 默认 false, 生成一次即可，避免每次工程启动都生成，一旦生成配置文件之后，改成 false。
        // 否则这个文件每次会在重新加载的时候重新生成，这会导致 eslint 有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
        enabled: false,
        // 默认就是 ./.eslintrc-auto-import.json
        // filepath: './.eslintrc-auto-import.json', 
        // globalsPropValue: true, // 默认 true
      },
      // auto-import.d.ts生成的位置，默认在根目录生成
      // dts: 'src/auto-import.d.ts'
    })
  ]
})

如果使用了eslint校验规则，在 vue 文件中会报一个 eslint 报错问题: 'ref' is not defined

则：配置 `eslintrc.enabled: true`，重启项目生成 .eslintrc-auto-import.json 文件（浏览器需要访问所有应用到 vue/element api 的页面才会生成所有自动导入 api 的文件 json），生成后改为 false。最后在 .eslintrc.js 文件 extends中引入生成的 json

3、vite-plugin-style-import  按需导入组件库样式

3.1安装

npm install vite-plugin-style-important -D

3.2 配置

// vite.config.js
import { defineConfig } from 'vite'
import styleImport, {
  AndDesignVueResolve,
  VantResolve,
  ElementPlusResolve,
} from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    styleImport({
      resolves: [
        AndDesignVueResolve(),
        VantResolve(),
        ElementPlusResolve(),
      ],
      // 自定义规则
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`
          }
        }
      ]
    })
  ],
  // 引用使用less的库要配置一下
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
})

4、vite-plugin-svg-icons

        当你使用该插件的时候，指定好存放svg的文件夹。再按照指定的方式去访问svg图片。就可以再不产生http请求的情况下渲染出svg图片。使用该插件时，插件会自动将所有svg图片加载到HTML中。并且每一个svg将会被过滤去无用的信息数据。让svg达到最小的值。之后使用svg图片就只需要操作DOM即可，而不需要发送http请求。

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export function configSvgIconsPlugin(isBuild: boolean) {
  const svgIconsPlugin = createSvgIconsPlugin({
    // 本地svg图片地址
    iconDirs: [path.resolve(process.cwd(), 'src/assets/sprites')],
    svgoOptions: isBuild,
    // 图标ID的格式
    symbolId: 'icon-[dir]-[name]',
  });
  return svgIconsPlugin;
}


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

5、vite-plugin-monkey

       开发构建 Tampermonkey 用户脚本。

import { defineConfig } from 'vite'
import Userscript from 'vite-plugin-tm-userscript'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Userscript({
      externalGlobals: ['vue']
    })
  ]
})

6、vite-plugin-compression 

        当前端资源过大时，服务器请求资源会比较慢。前端可以将资源通过Gzip压缩使文件体积减少大概60%左右，压缩后的文件，通过后端简单处理，浏览器可以将其正常解析出来。如果浏览器的请求头中包含content-encoding: gzip，即证明浏览器支持该属性。

import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression()
  ]
})