vite.config.ts 2.8 KB

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