vite.config.ts 2.9 KB

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