plugins.ts 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import { resolve } from "path";
  2. import vue from "@vitejs/plugin-vue";
  3. import { viteBuildInfo } from "./info";
  4. import svgLoader from "vite-svg-loader";
  5. import legacy from "@vitejs/plugin-legacy";
  6. import vueJsx from "@vitejs/plugin-vue-jsx";
  7. import WindiCSS from "vite-plugin-windicss";
  8. import { viteMockServe } from "vite-plugin-mock";
  9. import liveReload from "vite-plugin-live-reload";
  10. import styleImport from "vite-plugin-style-import";
  11. import VueI18n from "@intlify/vite-plugin-vue-i18n";
  12. import ElementPlus from "unplugin-element-plus/vite";
  13. import { visualizer } from "rollup-plugin-visualizer";
  14. import removeConsole from "vite-plugin-remove-console";
  15. import themePreprocessorPlugin from "@pureadmin/theme";
  16. import { genScssMultipleScopeVars } from "/@/layout/theme";
  17. export function getPluginsList(command, VITE_LEGACY) {
  18. const prodMock = true;
  19. const lifecycle = process.env.npm_lifecycle_event;
  20. return [
  21. vue(),
  22. // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
  23. VueI18n({
  24. runtimeOnly: true,
  25. compositionOnly: true,
  26. include: [resolve("locales/**")]
  27. }),
  28. // jsx、tsx语法支持
  29. vueJsx(),
  30. WindiCSS(),
  31. // 线上环境删除console
  32. removeConsole(),
  33. viteBuildInfo(),
  34. // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
  35. liveReload(["src/layout/**/*", "src/router/**/*"]),
  36. // 自定义主题
  37. themePreprocessorPlugin({
  38. scss: {
  39. multipleScopeVars: genScssMultipleScopeVars(),
  40. // 默认取 multipleScopeVars[0].scopeName
  41. defaultScopeName: "",
  42. // 在生产模式是否抽取独立的主题css文件,extract为true以下属性有效
  43. extract: true,
  44. // 独立主题css文件的输出路径,默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
  45. outputDir: "",
  46. // 会选取defaultScopeName对应的主题css文件在html添加link
  47. themeLinkTagId: "head",
  48. // "head"||"head-prepend" || "body" ||"body-prepend"
  49. themeLinkTagInjectTo: "head",
  50. // 是否对抽取的css文件内对应scopeName的权重类名移除
  51. removeCssScopeName: false,
  52. // 可以自定义css文件名称的函数
  53. customThemeCssFileName: scopeName => scopeName
  54. }
  55. }),
  56. // svg组件化支持
  57. svgLoader(),
  58. // 按需加载vxe-table
  59. styleImport({
  60. libs: [
  61. {
  62. libraryName: "vxe-table",
  63. esModule: true,
  64. ensureStyleFile: true,
  65. resolveComponent: name => `vxe-table/es/${name}`,
  66. resolveStyle: name => `vxe-table/es/${name}/style.css`
  67. }
  68. ]
  69. }),
  70. ElementPlus({}),
  71. // mock支持
  72. viteMockServe({
  73. mockPath: "mock",
  74. localEnabled: command === "serve",
  75. prodEnabled: command !== "serve" && prodMock,
  76. injectCode: `
  77. import { setupProdMockServer } from './mockProdServer';
  78. setupProdMockServer();
  79. `,
  80. logger: true
  81. }),
  82. // 是否为打包后的文件提供传统浏览器兼容性支持
  83. VITE_LEGACY
  84. ? legacy({
  85. targets: ["ie >= 11"],
  86. additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
  87. })
  88. : null,
  89. // 打包分析
  90. lifecycle === "report"
  91. ? visualizer({ open: true, brotliSize: true, filename: "report.html" })
  92. : null
  93. ];
  94. }