vite.config.ts 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import { defineConfig, loadEnv } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import { resolve } from 'path'
  4. // https://vitejs.dev/config/
  5. export default defineConfig(({ command, mode }) => {
  6. // 加载环境变量
  7. const env = loadEnv(mode, process.cwd(), '')
  8. // 根据模式设置不同的配置
  9. const isDev = mode === 'dev'
  10. const isTest = mode === 'test'
  11. const isProd = mode === 'prod'
  12. return {
  13. plugins: [vue()],
  14. resolve: {
  15. alias: {
  16. '@': resolve(__dirname, 'src'),
  17. },
  18. },
  19. server: {
  20. port: isDev ? 3000 : isTest ? 3001 : 3002,
  21. host: true,
  22. open: true, // 自动打开浏览器
  23. proxy: {
  24. '/api': {
  25. target: env.VITE_API_BASE_URL || 'http://localhost:8000',
  26. changeOrigin: true,
  27. },
  28. '/oauth': {
  29. target: env.VITE_API_BASE_URL || 'http://localhost:8000',
  30. changeOrigin: true,
  31. },
  32. },
  33. },
  34. build: {
  35. outDir: `dist-${mode}`, // 不同环境输出到不同目录
  36. sourcemap: isDev || isTest, // 开发和测试环境生成 sourcemap
  37. minify: isProd ? 'terser' : false, // 生产环境压缩
  38. rollupOptions: {
  39. output: {
  40. // 根据环境设置不同的文件名
  41. entryFileNames: `assets/[name]-${mode}.[hash].js`,
  42. chunkFileNames: `assets/[name]-${mode}.[hash].js`,
  43. assetFileNames: `assets/[name]-${mode}.[hash].[ext]`,
  44. manualChunks: {
  45. vue: ['vue', 'vue-router', 'pinia'],
  46. element: ['element-plus', '@element-plus/icons-vue'],
  47. utils: ['axios', 'js-cookie', 'dayjs'],
  48. },
  49. },
  50. },
  51. // 生产环境优化
  52. ...(isProd && {
  53. terserOptions: {
  54. compress: {
  55. drop_console: true, // 移除 console
  56. drop_debugger: true, // 移除 debugger
  57. },
  58. },
  59. }),
  60. },
  61. define: {
  62. // 注入环境变量到代码中
  63. __APP_ENV__: JSON.stringify(mode),
  64. __BUILD_TIME__: JSON.stringify(new Date().toISOString()),
  65. },
  66. css: {
  67. preprocessorOptions: {
  68. scss: {
  69. additionalData: `@import "@/styles/variables.scss";`,
  70. },
  71. },
  72. },
  73. }
  74. })