| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- import { defineConfig, loadEnv } from 'vite';
- import path from 'path';
- import react from '@vitejs/plugin-react';
- import tailwindcss from "@tailwindcss/vite";
- export default defineConfig(({ mode, command }) => {
- const env = loadEnv(mode, path.join(process.cwd(), 'env'));
- return {
- envDir: './env',// 环境目录
- css: {
- preprocessorOptions: {
- less: {// 全局导入
- charset: false,
- additionalData: '@import "@/style/global.less";',
- }
- }
- },
- resolve: {
- // 别名
- alias: [
- {
- find: '@',
- replacement: path.resolve(__dirname, 'src'),
- }
- ],
- // 忽略文件后缀名
- extensions: ['.js', '.jsx', '.ts', '.tsx', '.less', '.json']
- },
- server: {
- // 监听所有地址
- host: '0.0.0.0',
- // 端口号
- port: 3100,
- // 自动打开浏览器
- open: true,
- // 热更新配置
- hmr: {
- // 不指定 host,让 Vite 自动使用客户端的主机名
- // 这样可以支持 localhost 和 IP 地址访问
- port: 3100, // 使用相同的端口
- protocol: 'ws', // WebSocket 协议
- },
- // 自动更换可用端口
- strictPort: true,
- // 文件监听配置
- watch: {
- // 在某些文件系统上,需要启用轮询才能正确检测文件变化
- usePolling: true, // 启用轮询以确保文件变化能被检测到
- interval: 100, // 轮询间隔(毫秒)
- ignored: ['**/node_modules/**', '**/build/**'],
- },
- // 代理规则
- proxy: {
- '/api/-captchaImage': {
- // 开启跨域
- changeOrigin: true,
- // 转发地址
- target: env.VITE_API_URL_img,
- // 路径重写
- rewrite: (path) => path.replace(/^\/api\/-captchaImage/i, '')
- },
- '/api': {
- // 开启跨域
- changeOrigin: true,
- // 转发地址
- target: env.VITE_API_URL,
- // 路径重写
- rewrite: (path) => path.replace(/^\/api/, ''),
- }
- }
- },
- build: {
- outDir: 'build',// 打包文件目录
- chunkSizeWarningLimit: 10240,// chunk大于10M触发警告
- // 底层配置
- rollupOptions: {
- output: {
- entryFileNames: 'js/[name]-[hash].js',
- chunkFileNames: 'js/[name]-[hash].js',
- }
- },
- },
- esbuild: {
- drop: command === 'build' ? ['console', 'debugger'] : [],
- },
- plugins: [
- tailwindcss(),// TailwindCSS编译
- react({
- // 确保 Fast Refresh 能正确处理 HOC(如 observer)
- // 对于被高阶组件包装的组件,Fast Refresh 需要特殊处理
- jsxRuntime: 'automatic',
- }),// React编译(Fast Refresh 默认启用)
- ],
- }
- })
|