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.

188 lines
5.8 KiB

3 years ago
3 years ago
3 years ago
  1. import { resolve } from "path";
  2. import vue from "@vitejs/plugin-vue";
  3. import svgLoader from "vite-svg-loader";
  4. import legacy from "@vitejs/plugin-legacy";
  5. import vueJsx from "@vitejs/plugin-vue-jsx";
  6. import WindiCSS from "vite-plugin-windicss";
  7. import { warpperEnv, regExps } from "./build";
  8. import liveReload from "vite-plugin-live-reload";
  9. import { viteMockServe } from "vite-plugin-mock";
  10. import ElementPlus from "unplugin-element-plus/vite";
  11. import removeConsole from "vite-plugin-remove-console";
  12. import { UserConfigExport, ConfigEnv, loadEnv } from "vite";
  13. import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor";
  14. // 当前执行node命令时文件夹的地址(工作目录)
  15. const root: string = process.cwd();
  16. // 路径查找
  17. const pathResolve = (dir: string): string => {
  18. return resolve(__dirname, ".", dir);
  19. };
  20. // 设置别名
  21. const alias: Record<string, string> = {
  22. "/@": pathResolve("src"),
  23. "@build": pathResolve("build"),
  24. //解决开发环境下的警告
  25. "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
  26. };
  27. export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  28. const {
  29. VITE_PORT,
  30. VITE_LEGACY,
  31. VITE_PUBLIC_PATH,
  32. VITE_PROXY_DOMAIN,
  33. VITE_PROXY_DOMAIN_REAL
  34. } = warpperEnv(loadEnv(mode, root));
  35. const prodMock = true;
  36. return {
  37. base: VITE_PUBLIC_PATH,
  38. root,
  39. resolve: {
  40. alias
  41. },
  42. css: {
  43. // https://github.com/vitejs/vite/issues/5833
  44. postcss: {
  45. plugins: [
  46. {
  47. postcssPlugin: "internal:charset-removal",
  48. AtRule: {
  49. charset: atRule => {
  50. if (atRule.name === "charset") {
  51. atRule.remove();
  52. }
  53. }
  54. }
  55. }
  56. ]
  57. }
  58. },
  59. // 服务端渲染
  60. server: {
  61. // 是否开启 https
  62. https: false,
  63. // 端口号
  64. port: VITE_PORT,
  65. host: "0.0.0.0",
  66. // 本地跨域代理
  67. proxy:
  68. VITE_PROXY_DOMAIN_REAL.length > 0
  69. ? {
  70. [VITE_PROXY_DOMAIN]: {
  71. target: VITE_PROXY_DOMAIN_REAL,
  72. // ws: true,
  73. changeOrigin: true,
  74. rewrite: (path: string) => regExps(path, VITE_PROXY_DOMAIN)
  75. }
  76. }
  77. : null
  78. },
  79. plugins: [
  80. vue(),
  81. // jsx、tsx语法支持
  82. vueJsx(),
  83. WindiCSS(),
  84. // 线上环境删除console
  85. removeConsole(),
  86. // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
  87. liveReload(["src/layout/**/*"]),
  88. // 自定义主题
  89. themePreprocessorPlugin({
  90. scss: {
  91. multipleScopeVars: [
  92. {
  93. scopeName: "layout-theme-default",
  94. path: pathResolve("src/layout/theme/default-vars.scss")
  95. },
  96. {
  97. scopeName: "layout-theme-light",
  98. path: pathResolve("src/layout/theme/light-vars.scss")
  99. },
  100. {
  101. scopeName: "layout-theme-dusk",
  102. path: pathResolve("src/layout/theme/dusk-vars.scss")
  103. },
  104. {
  105. scopeName: "layout-theme-volcano",
  106. path: pathResolve("src/layout/theme/volcano-vars.scss")
  107. },
  108. {
  109. scopeName: "layout-theme-yellow",
  110. path: pathResolve("src/layout/theme/yellow-vars.scss")
  111. },
  112. {
  113. scopeName: "layout-theme-mingQing",
  114. path: pathResolve("src/layout/theme/mingQing-vars.scss")
  115. },
  116. {
  117. scopeName: "layout-theme-auroraGreen",
  118. path: pathResolve("src/layout/theme/auroraGreen-vars.scss")
  119. },
  120. {
  121. scopeName: "layout-theme-pink",
  122. path: pathResolve("src/layout/theme/pink-vars.scss")
  123. },
  124. {
  125. scopeName: "layout-theme-saucePurple",
  126. path: pathResolve("src/layout/theme/saucePurple-vars.scss")
  127. }
  128. ],
  129. // 默认取 multipleScopeVars[0].scopeName
  130. defaultScopeName: "",
  131. // 在生产模式是否抽取独立的主题css文件,extract为true以下属性有效
  132. extract: true,
  133. // 独立主题css文件的输出路径,默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
  134. outputDir: "",
  135. // 会选取defaultScopeName对应的主题css文件在html添加link
  136. themeLinkTagId: "head",
  137. // "head"||"head-prepend" || "body" ||"body-prepend"
  138. themeLinkTagInjectTo: "head",
  139. // 是否对抽取的css文件内对应scopeName的权重类名移除
  140. removeCssScopeName: false,
  141. // 可以自定义css文件名称的函数
  142. customThemeCssFileName: scopeName => scopeName
  143. }
  144. }),
  145. // svg组件化支持
  146. svgLoader(),
  147. ElementPlus({}),
  148. // mock支持
  149. viteMockServe({
  150. mockPath: "mock",
  151. localEnabled: command === "serve",
  152. prodEnabled: command !== "serve" && prodMock,
  153. injectCode: `
  154. import { setupProdMockServer } from './mockProdServer';
  155. setupProdMockServer();
  156. `,
  157. logger: true
  158. }),
  159. // 是否为打包后的文件提供传统浏览器兼容性支持
  160. VITE_LEGACY
  161. ? legacy({
  162. targets: ["ie >= 11"],
  163. additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
  164. })
  165. : null
  166. ],
  167. optimizeDeps: {
  168. include: [
  169. "element-plus/lib/locale/lang/zh-cn",
  170. "element-plus/lib/locale/lang/en"
  171. ],
  172. exclude: ["@zougt/vite-plugin-theme-preprocessor/dist/browser-utils"]
  173. },
  174. build: {
  175. sourcemap: false,
  176. brotliSize: false,
  177. // 消除打包大小超过500kb警告
  178. chunkSizeWarningLimit: 2000
  179. },
  180. define: {
  181. __INTLIFY_PROD_DEVTOOLS__: false
  182. }
  183. };
  184. };