vite.config.ts 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. import { resolve } from 'path'
  2. import { loadEnv } from 'vite'
  3. import type { UserConfig, ConfigEnv } from 'vite'
  4. import Vue from '@vitejs/plugin-vue'
  5. import VueJsx from '@vitejs/plugin-vue-jsx'
  6. import progress from 'vite-plugin-progress'
  7. import EslintPlugin from 'vite-plugin-eslint'
  8. import { ViteEjsPlugin } from 'vite-plugin-ejs'
  9. import { viteMockServe } from 'vite-plugin-mock'
  10. import PurgeIcons from 'vite-plugin-purge-icons'
  11. import ServerUrlCopy from 'vite-plugin-url-copy'
  12. import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
  13. import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
  14. import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
  15. import UnoCSS from 'unocss/vite'
  16. import { visualizer } from 'rollup-plugin-visualizer'
  17. // https://vitejs.dev/config/
  18. const root = process.cwd()
  19. function pathResolve(dir: string) {
  20. return resolve(root, '.', dir)
  21. }
  22. export default ({ command, mode }: ConfigEnv): UserConfig => {
  23. let env = {} as any
  24. const isBuild = command === 'build'
  25. if (!isBuild) {
  26. env = loadEnv(process.argv[3] === '--mode' ? process.argv[4] : process.argv[3], root)
  27. } else {
  28. env = loadEnv(mode, root)
  29. }
  30. return {
  31. base: env.VITE_BASE_PATH,
  32. plugins: [
  33. Vue({
  34. script: {
  35. // 开启defineModel
  36. defineModel: true
  37. }
  38. }),
  39. VueJsx(),
  40. ServerUrlCopy(),
  41. progress(),
  42. env.VITE_USE_ALL_ELEMENT_PLUS_STYLE === 'false'
  43. ? createStyleImportPlugin({
  44. resolves: [ElementPlusResolve()],
  45. libs: [
  46. {
  47. libraryName: 'element-plus',
  48. esModule: true,
  49. resolveStyle: (name) => {
  50. if (name === 'click-outside') {
  51. return ''
  52. }
  53. return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
  54. }
  55. }
  56. ]
  57. })
  58. : undefined,
  59. EslintPlugin({
  60. cache: false,
  61. failOnWarning: false,
  62. failOnError: false,
  63. include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
  64. }),
  65. VueI18nPlugin({
  66. runtimeOnly: true,
  67. compositionOnly: true,
  68. include: [resolve(__dirname, 'src/locales/**')]
  69. }),
  70. createSvgIconsPlugin({
  71. iconDirs: [pathResolve('src/assets/svgs')],
  72. symbolId: 'icon-[dir]-[name]',
  73. svgoOptions: true
  74. }),
  75. PurgeIcons(),
  76. env.VITE_USE_MOCK === 'true'
  77. ? viteMockServe({
  78. ignore: /^\_/,
  79. mockPath: 'mock',
  80. localEnabled: !isBuild,
  81. prodEnabled: isBuild,
  82. injectCode: `
  83. import { setupProdMockServer } from '../mock/_createProductionServer'
  84. setupProdMockServer()
  85. `
  86. })
  87. : undefined,
  88. ViteEjsPlugin({
  89. title: env.VITE_APP_TITLE
  90. }),
  91. UnoCSS()
  92. ],
  93. css: {
  94. preprocessorOptions: {
  95. less: {
  96. additionalData: '@import "./src/styles/variables.module.less";',
  97. javascriptEnabled: true
  98. }
  99. }
  100. },
  101. resolve: {
  102. extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less', '.css'],
  103. alias: [
  104. {
  105. find: 'vue-i18n',
  106. replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
  107. },
  108. {
  109. find: /\@\//,
  110. replacement: `${pathResolve('src')}/`
  111. }
  112. ]
  113. },
  114. esbuild: {
  115. pure: env.VITE_DROP_CONSOLE === 'true' ? ['console.log'] : undefined,
  116. drop: env.VITE_DROP_DEBUGGER === 'true' ? ['debugger'] : undefined
  117. },
  118. build: {
  119. target: 'es2015',
  120. outDir: env.VITE_OUT_DIR || 'dist',
  121. sourcemap: env.VITE_SOURCEMAP === 'true',
  122. // brotliSize: false,
  123. rollupOptions: {
  124. plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined,
  125. // 拆包
  126. output: {
  127. manualChunks: {
  128. 'vue-chunks': ['vue', 'vue-router', 'pinia', 'vue-i18n'],
  129. 'element-plus': ['element-plus'],
  130. 'wang-editor': ['@wangeditor/editor', '@wangeditor/editor-for-vue'],
  131. echarts: ['echarts', 'echarts-wordcloud']
  132. }
  133. }
  134. },
  135. cssCodeSplit: !(env.VITE_USE_CSS_SPLIT === 'false'),
  136. cssTarget: ['chrome31']
  137. },
  138. server: {
  139. port: 4000,
  140. proxy: {
  141. // 选项写法
  142. // '/api': {
  143. // target: 'http://127.0.0.1:8000',
  144. // changeOrigin: true,
  145. // rewrite: (path) => path.replace(/^\/api/, '')
  146. // },
  147. // 选项写法
  148. '/adminapi': {
  149. target: 'https://zhuangxiu.qiniu1314.com',
  150. changeOrigin: true
  151. // rewrite: (path) => path.replace(/^\//, '')
  152. }
  153. },
  154. hmr: {
  155. overlay: false
  156. },
  157. host: '0.0.0.0'
  158. },
  159. optimizeDeps: {
  160. include: [
  161. 'vue',
  162. 'vue-router',
  163. 'vue-types',
  164. 'element-plus/es/locale/lang/zh-cn',
  165. 'element-plus/es/locale/lang/en',
  166. '@iconify/iconify',
  167. '@vueuse/core',
  168. 'axios',
  169. 'qs',
  170. 'echarts',
  171. 'echarts-wordcloud',
  172. 'qrcode',
  173. '@wangeditor/editor',
  174. '@wangeditor/editor-for-vue',
  175. 'vue-json-pretty',
  176. '@zxcvbn-ts/core',
  177. 'dayjs',
  178. 'cropperjs'
  179. ]
  180. }
  181. }
  182. }