aida_front/vite.config.js

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
import AutoImport from "unplugin-auto-import/vite";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd(), "");
	console.log(mode)
  return {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
    plugins: [
      vue(),
      Components({
        resolvers: [
          AntDesignVueResolver({ importStyle: false }),
          ElementPlusResolver(),
        ],
      }),
      AutoImport({
        resolvers: [ElementPlusResolver()],
        imports: [
          "vue",
          "vue-router",
          {
            "lodash-es": [
              "debounce",
              "cloneDeep",
              "cloneDeepWith",
              "isBoolean",
              "isString",
              "isNumber",
              "isArray",
              "isDate",
              "isFunction",
              "isNaN",
              "isNull",
              "isObject",
              "isUndefined",
            ],
          },
        ],
        dts: "src/auto-imports.d.ts",
        // 添加 ESLint 支持
        eslintrc: {
          enabled: true,
          filepath: "./.eslintrc-auto-import.json",
        },
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
        // 指定symbolId格式
        symbolId: "icon-[dir]-[name]",
        inject: "body-last", // 注入位置优化
      }),
    ],
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            "primary-color": "#ec6800",
          },
          javascriptEnabled: true,
          // 全局导入less变量文件
          additionalData: `@import "${path.resolve(
            __dirname,
            "src/assets/style/style.less"
          )}";`,
        },
      },
    },
    server: {
      host: "0.0.0.0", // 允许局域网内的IP访问
      port: mode === "production" ? 8060 : 10086, // 根据环境设置端口
      open: true, // 自动打开浏览器
      strictPort: false, // 如果端口已被占用，则尝试下一个可用端口
      hmr: {
        overlay: true,
      },
      proxy: {
        "/api": {
          target: "http://192.168.1.7:5567",
          // target: 'https://develop.api.aida.com.hk',
          changeOrigin: true,
        },
        "/xupei": {
          target: "http://192.168.1.7:5567",
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/robot/, "/api"),
        },
        "/oldsis": {
          target: "https://old.api.aida.com.hk",
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/oldsis/, "/api"),
        },
      },
    },
    build: {
      sourcemap: false, // 对应vue.config.js中的productionSourceMap: false
      outDir: "dist",
      assetsDir: "assets",
      target: "es2015", // 目标浏览器版本
      minify: "terser", // 使用terser进行压缩
      cssCodeSplit: true,
      // reportCompressedSize: false, // 提升构建速度
      terserOptions: {
        compress: {
          drop_console: true, // 删除console
          drop_debugger: true, // 删除debugger
        },
        format: {
          comments: false, // 删除注释
        },
      },
      // 优化分包策略
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ["vue", "vue-router"],
            antd: ["ant-design-vue"],
            elementPlus: ["element-plus"],
            utils: ["axios", "lodash-es"],
            // 添加更细粒度的分包
            icons: ["@ant-design/icons-vue"],
          },
          // 优化文件命名
          chunkFileNames: "js/[name]-[hash].js",
          entryFileNames: "js/[name]-[hash].js",
        //   assetFileNames: "[ext]/[name]-[hash].[ext]",
		    assetFileNames: (assetInfo) => {
			const name = assetInfo.name || '';
			const ext = name.includes('.') ? name.substring(name.lastIndexOf('.')) : '';
			// 定义文件后缀名数组用于分类
			const imgExts = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.icon'];
			const videoExts = ['.mp4', '.avi', '.wmv', '.mov', '.mkv', '.webm']; // 视频格式扩展
			const fontExts = [
				'.ttf', '.otf', '.woff', '.woff2', '.eot',
				'.ttc', '.dfont', '.pfb', '.pfm', '.afm'
			  ];
			if (videoExts.some(ext => name.endsWith(ext))) {
			  return 'video/[name]-[hash].[ext]';
			}
			else if (imgExts.some(ext => name.endsWith(ext))) {
			  return 'image/[name]-[hash].[ext]';
			}
			else if (name.endsWith('.css')) {
			  return 'css/[name]-[hash].[ext]';
			}
			if (fontExts.some(fontExt => ext.toLowerCase() === fontExt)) {
				return 'fonts/[name]-[hash].[ext]';
			}
			else {
			  return 'assets/[name]-[hash].[ext]';
			}
		  }
        },
      },
    },
    // 优化依赖预构建
    optimizeDeps: {
      include: [
        "vue",
        "vue-router",
        "ant-design-vue",
        "element-plus",
        "axios",
        "lodash-es",
      ],
      exclude: ["@iconify/json"], // 排除大型JSON文件
    },
    // 定义全局常量替换
    define: {
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false,
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
    },
  };
});