平安校园
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

152 lines
4.5 KiB

  1. import { resolve } from "path";
  2. import { PluginOption } from "vite";
  3. import { VitePWA } from "vite-plugin-pwa";
  4. import { visualizer } from "rollup-plugin-visualizer";
  5. import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
  6. import { createHtmlPlugin } from "vite-plugin-html";
  7. import vue from "@vitejs/plugin-vue";
  8. import vueJsx from "@vitejs/plugin-vue-jsx";
  9. import eslintPlugin from "vite-plugin-eslint";
  10. import viteCompression from "vite-plugin-compression";
  11. import vueSetupExtend from "unplugin-vue-setup-extend-plus/vite";
  12. import UnoCSS from "unocss/vite";
  13. import AutoImport from "unplugin-auto-import/vite";
  14. import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
  15. import Components from "unplugin-vue-components/vite";
  16. import Icons from "unplugin-icons/vite";
  17. import IconsResolver from "unplugin-icons/resolver";
  18. /**
  19. * 创建 vite 插件
  20. * @param viteEnv
  21. */
  22. export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOption[])[] => {
  23. const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_PWA } = viteEnv;
  24. return [
  25. vue(),
  26. // vue 可以使用 jsx/tsx 语法
  27. vueJsx(),
  28. // esLint 报错信息显示在浏览器界面上
  29. eslintPlugin(),
  30. // name 可以写在 script 标签上
  31. vueSetupExtend({}),
  32. // 创建打包压缩配置
  33. createCompression(viteEnv),
  34. // 注入变量到 html 文件
  35. createHtmlPlugin({
  36. minify: true,
  37. viteNext: true,
  38. inject: {
  39. data: { title: VITE_GLOB_APP_TITLE }
  40. }
  41. }),
  42. // 使用 svg 图标
  43. createSvgIconsPlugin({
  44. iconDirs: [resolve(process.cwd(), "src/assets/svg")],
  45. symbolId: "local-[dir]-[name]"
  46. }),
  47. // vitePWA
  48. VITE_PWA && createVitePwa(viteEnv),
  49. // 是否生成包预览,分析依赖包大小做优化处理
  50. VITE_REPORT && (visualizer({ filename: "stats.html", gzipSize: true, brotliSize: true }) as PluginOption),
  51. // 自动导入组件
  52. AutoImport({
  53. imports: ["vue", "vue-router"],
  54. // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
  55. // 自动导入 Element Plus 相关函数,如:ElMessage, ElMessageBox... (带样式)
  56. resolvers: [
  57. ElementPlusResolver(),
  58. // Auto import icon components
  59. // 自动导入图标组件
  60. IconsResolver({
  61. prefix: "Icon"
  62. })
  63. ],
  64. dts: "src/auto-import.d.ts" // 路径下自动生成文件夹存放全局指令
  65. }),
  66. Components({
  67. dirs: ["src/components"], // 配置需要默认导入的自定义组件文件夹,该文件夹下的所有组件都会自动 import
  68. resolvers: [
  69. // Auto register icon components
  70. // 自动注册图标组件
  71. IconsResolver({
  72. enabledCollections: ["ep"] // element-plus 图标库
  73. }),
  74. // Auto register Element Plus components
  75. // 自动导入 Element Plus 组件
  76. ElementPlusResolver()
  77. ]
  78. }),
  79. Icons({
  80. compiler: "vue3",
  81. autoInstall: true
  82. }),
  83. UnoCSS() // UnoCSS
  84. ];
  85. };
  86. /**
  87. * @description 根据 compress 配置,生成不同的压缩规则
  88. * @param viteEnv
  89. */
  90. const createCompression = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
  91. const { VITE_BUILD_COMPRESS = "none", VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
  92. const compressList = VITE_BUILD_COMPRESS.split(",");
  93. const plugins: PluginOption[] = [];
  94. if (compressList.includes("gzip")) {
  95. plugins.push(
  96. viteCompression({
  97. ext: ".gz",
  98. algorithm: "gzip",
  99. deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
  100. })
  101. );
  102. }
  103. if (compressList.includes("brotli")) {
  104. plugins.push(
  105. viteCompression({
  106. ext: ".br",
  107. algorithm: "brotliCompress",
  108. deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
  109. })
  110. );
  111. }
  112. return plugins;
  113. };
  114. /**
  115. * @description VitePwa
  116. * @param viteEnv
  117. */
  118. const createVitePwa = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
  119. const { VITE_GLOB_APP_TITLE } = viteEnv;
  120. return VitePWA({
  121. registerType: "autoUpdate",
  122. manifest: {
  123. name: VITE_GLOB_APP_TITLE,
  124. short_name: VITE_GLOB_APP_TITLE,
  125. theme_color: "#ffffff",
  126. icons: [
  127. {
  128. src: "/logo.png",
  129. sizes: "192x192",
  130. type: "image/png"
  131. },
  132. {
  133. src: "/logo.png",
  134. sizes: "512x512",
  135. type: "image/png"
  136. },
  137. {
  138. src: "/logo.png",
  139. sizes: "512x512",
  140. type: "image/png",
  141. purpose: "any maskable"
  142. }
  143. ]
  144. }
  145. });
  146. };