vite.config.ts 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  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 WindiCSS from 'vite-plugin-windicss'
  6. import VueJsx from '@vitejs/plugin-vue-jsx'
  7. import EslintPlugin from 'vite-plugin-eslint'
  8. import VueI18n from '@intlify/vite-plugin-vue-i18n'
  9. import styleImport, { ElementPlusResolve } from 'vite-plugin-style-import'
  10. import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
  11. import PurgeIcons from 'vite-plugin-purge-icons'
  12. import DefineOptions from 'unplugin-vue-define-options/vite'
  13. import { createHtmlPlugin } from 'vite-plugin-html'
  14. // 当前执行node命令时文件夹的地址(工作目录)
  15. const root = process.cwd()
  16. // 路径查找
  17. function pathResolve(dir: string) {
  18. return resolve(root, '.', dir)
  19. }
  20. // https://vitejs.dev/config/
  21. export default ({ command, mode }: ConfigEnv): UserConfig => {
  22. let env = {} as any
  23. const isBuild = command === 'build'
  24. if (!isBuild) {
  25. env = loadEnv((process.argv[3] === '--mode' ? process.argv[4] : process.argv[3]), root)
  26. } else {
  27. env = loadEnv(mode, root)
  28. }
  29. return {
  30. base: command === 'serve' ? './' : env.VITE_BASE_PATH,
  31. root: process.cwd(),
  32. // 服务端渲染
  33. server: {
  34. // 是否开启 https
  35. https: false,
  36. // 端口号
  37. port: env.VITE_PORT,
  38. host: "0.0.0.0",
  39. open: env.VITE_OPEN,
  40. // 本地跨域代理
  41. proxy: {
  42. ['/dev-api']: {
  43. target: env.VITE_BASE_URL,
  44. ws: false,
  45. changeOrigin: true,
  46. rewrite: (path) => path.replace(new RegExp(`^/dev-api`), ''),
  47. },
  48. },
  49. },
  50. plugins: [
  51. Vue(),
  52. VueJsx(),
  53. WindiCSS(),
  54. styleImport({
  55. resolves: [ElementPlusResolve()],
  56. libs: [{
  57. libraryName: 'element-plus',
  58. esModule: true,
  59. resolveStyle: (name) => {
  60. return `element-plus/es/components/${name.substring(3)}/style/css`
  61. }
  62. }]
  63. }),
  64. EslintPlugin({
  65. include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
  66. }),
  67. VueI18n({
  68. runtimeOnly: true,
  69. compositionOnly: true,
  70. include: [resolve(__dirname, 'src/locales/**')]
  71. }),
  72. createSvgIconsPlugin({
  73. iconDirs: [pathResolve('src/assets/svgs')],
  74. symbolId: 'icon-[dir]-[name]',
  75. svgoOptions: true
  76. }),
  77. PurgeIcons(),
  78. DefineOptions(),
  79. createHtmlPlugin({
  80. inject: {
  81. data: {
  82. title: env.VITE_APP_TITLE,
  83. injectScript: `<script src="./inject.js"></script>`,
  84. }
  85. }
  86. })
  87. ],
  88. css: {
  89. preprocessorOptions: {
  90. less: {
  91. additionalData: '@import "./src/styles/variables.module.less";',
  92. javascriptEnabled: true
  93. }
  94. }
  95. },
  96. resolve: {
  97. extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less', '.css'],
  98. alias: [
  99. {
  100. find: 'vue-i18n',
  101. replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
  102. },
  103. {
  104. find: /\@\//,
  105. replacement: `${pathResolve('src')}/`
  106. }
  107. ]
  108. },
  109. build: {
  110. minify: 'terser',
  111. outDir: env.VITE_OUT_DIR || 'dist',
  112. sourcemap: env.VITE_SOURCEMAP === 'true' ? 'inline' : false,
  113. terserOptions: {
  114. compress: {
  115. drop_debugger: env.VITE_DROP_DEBUGGER === 'true',
  116. drop_console: env.VITE_DROP_CONSOLE === 'true'
  117. }
  118. }
  119. },
  120. optimizeDeps: {
  121. include: [
  122. 'vue',
  123. 'vue-router',
  124. 'vue-types',
  125. 'element-plus/es/locale/lang/zh-cn',
  126. 'element-plus/es/locale/lang/en',
  127. '@iconify/iconify',
  128. '@vueuse/core',
  129. 'axios',
  130. 'qs',
  131. 'echarts',
  132. 'echarts-wordcloud',
  133. 'intro.js',
  134. 'qrcode',
  135. '@wangeditor/editor',
  136. '@wangeditor/editor-for-vue'
  137. ]
  138. }
  139. }
  140. }