vite.config.ts 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. import { defineConfig, loadEnv } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import { resolve } from 'path'
  4. import { OUTPUT_DIR, brotliSize, chunkSizeWarningLimit, terserOptions, rollupOptions } from './build/constant'
  5. import viteCompression from 'vite-plugin-compression'
  6. import { axiosPre } from './src/settings/httpSetting'
  7. import { viteMockServe } from 'vite-plugin-mock'
  8. import monacoEditorPlugin from 'vite-plugin-monaco-editor'
  9. function pathResolve(dir: string) {
  10. return resolve(process.cwd(), '.', dir)
  11. }
  12. export default ({ mode }) => defineConfig({
  13. base: '/',
  14. // 路径重定向
  15. resolve: {
  16. alias: [
  17. {
  18. find: /\/#\//,
  19. replacement: pathResolve('types')
  20. },
  21. {
  22. find: '@',
  23. replacement: pathResolve('src')
  24. },
  25. {
  26. find: 'vue-i18n',
  27. replacement: 'vue-i18n/dist/vue-i18n.cjs.js' //解决i8n警告
  28. }
  29. ],
  30. dedupe: ['vue']
  31. },
  32. // 全局 css 注册
  33. css: {
  34. preprocessorOptions: {
  35. scss: {
  36. javascriptEnabled: true,
  37. additionalData: `@import "src/styles/common/style.scss";`
  38. }
  39. }
  40. },
  41. // 开发服务器配置
  42. server: {
  43. host: true,
  44. open: true,
  45. port: 3000,
  46. proxy: {
  47. [axiosPre]: {
  48. // @ts-ignore
  49. target: loadEnv(mode, process.cwd()).VITE_DEV_PATH,
  50. changeOrigin: true,
  51. ws: true,
  52. secure: true,
  53. // rewrite: (path) => path.replace(/^\/api/, ''),
  54. },
  55. // '/api_data': {
  56. // target: loadEnv(mode, process.cwd()).VITE_DEV_PATH,
  57. // changeOrigin: true,
  58. // rewrite: (path) => path.replace(/^\/api_data/, '')
  59. // },
  60. }
  61. },
  62. plugins: [
  63. vue({
  64. template: {
  65. compilerOptions: {
  66. // 排除 iconify 图标影子组件编译报错
  67. isCustomElement: tag => tag.startsWith('iconify-icon')
  68. }
  69. }
  70. }),
  71. monacoEditorPlugin({
  72. languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
  73. }),
  74. viteMockServe({
  75. mockPath: '/src/api/mock',
  76. // 开发打包开关
  77. localEnabled: true,
  78. // 生产打包开关
  79. prodEnabled: true,
  80. // 打开后,可以读取 ts 文件模块。 请注意,打开后将无法监视.js 文件
  81. supportTs: true,
  82. // 监视文件更改
  83. watchFiles: true
  84. }),
  85. // 压缩
  86. viteCompression({
  87. verbose: true,
  88. disable: false,
  89. threshold: 10240,
  90. algorithm: 'gzip',
  91. ext: '.gz'
  92. })
  93. ],
  94. build: {
  95. target: 'es2020',
  96. outDir: OUTPUT_DIR,
  97. // minify: 'terser', // 如果需要用terser混淆,可打开这两行
  98. // terserOptions: terserOptions,
  99. rollupOptions: rollupOptions,
  100. reportCompressedSize: brotliSize,
  101. chunkSizeWarningLimit: chunkSizeWarningLimit
  102. }
  103. })