vite.config.ts 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import { defineConfig, loadEnv } from 'vite';
  2. import path from 'path';
  3. import react from '@vitejs/plugin-react';
  4. import tailwindcss from "@tailwindcss/vite";
  5. export default defineConfig(({ mode, command }) => {
  6. const env = loadEnv(mode, path.join(process.cwd(), 'env'));
  7. return {
  8. envDir: './env',// 环境目录
  9. css: {
  10. preprocessorOptions: {
  11. scss: {
  12. charset: false,
  13. // 仅自动导入变量文件,不导入整个 global.scss
  14. additionalData: '@use "@/styles/variables.scss" as *;',
  15. }
  16. }
  17. },
  18. resolve: {
  19. // 别名
  20. alias: [
  21. {
  22. find: '@',
  23. replacement: path.resolve(__dirname, 'src'),
  24. }
  25. ],
  26. // 忽略文件后缀名
  27. extensions: ['.js', '.jsx', '.ts', '.tsx', '.less', '.json']
  28. },
  29. server: {
  30. // 监听所有地址
  31. host: '0.0.0.0',
  32. // 端口号
  33. port: 3100,
  34. // 自动打开浏览器
  35. open: true,
  36. // 热更新配置
  37. hmr: {
  38. // 不指定 host,让 Vite 自动使用客户端的主机名
  39. // 这样可以支持 localhost 和 IP 地址访问
  40. port: 3100, // 使用相同的端口
  41. protocol: 'ws', // WebSocket 协议
  42. },
  43. // 自动更换可用端口
  44. strictPort: true,
  45. // 文件监听配置
  46. watch: {
  47. // 在某些文件系统上,需要启用轮询才能正确检测文件变化
  48. usePolling: true, // 启用轮询以确保文件变化能被检测到
  49. interval: 100, // 轮询间隔(毫秒)
  50. ignored: ['**/node_modules/**', '**/build/**'],
  51. },
  52. // 代理规则
  53. proxy: {
  54. '/api/-captchaImage': {
  55. // 开启跨域
  56. changeOrigin: true,
  57. // 转发地址
  58. target: env.VITE_API_URL_img,
  59. // 路径重写
  60. rewrite: (path) => path.replace(/^\/api\/-captchaImage/i, '')
  61. },
  62. '/api': {
  63. // 开启跨域
  64. changeOrigin: true,
  65. // 转发地址
  66. target: env.VITE_API_URL,
  67. // 路径重写
  68. rewrite: (path) => path.replace(/^\/api/, ''),
  69. }
  70. }
  71. },
  72. build: {
  73. outDir: 'build',// 打包文件目录
  74. chunkSizeWarningLimit: 10240,// chunk大于10M触发警告
  75. // 底层配置
  76. rollupOptions: {
  77. output: {
  78. entryFileNames: 'js/[name]-[hash].js',
  79. chunkFileNames: 'js/[name]-[hash].js',
  80. }
  81. },
  82. },
  83. esbuild: {
  84. drop: command === 'build' ? ['console', 'debugger'] : [],
  85. },
  86. plugins: [
  87. tailwindcss(),// TailwindCSS编译
  88. react({
  89. // 确保 Fast Refresh 能正确处理 HOC(如 observer)
  90. // 对于被高阶组件包装的组件,Fast Refresh 需要特殊处理
  91. jsxRuntime: 'automatic',
  92. }),// React编译(Fast Refresh 默认启用)
  93. ],
  94. }
  95. })