biz-pc-cloud-zax/vite.config.ts

import vue from "@vitejs/plugin-vue"
import { resolve } from "path"
import { defineConfig, loadEnv, ConfigEnv } from "vite"
import vueSetupExtend from "vite-plugin-vue-setup-extend"
import AutoImport from "unplugin-auto-import/vite"
import topLevelAwait from "vite-plugin-top-level-await"
import { createStyleImportPlugin, VxeTableResolve } from "vite-plugin-style-import"
import viteCompression from "vite-plugin-compression"
// @ts-ignore
import { svgBuilder } from "/@/components/IconSelector/index"

import dns from "node:dns"
dns.setDefaultResultOrder("verbatim")

const pathResolve = (dir: string) => {
	return resolve(__dirname, ".", dir)
}

const alias: Record<string, string> = {
	"/@": pathResolve("./src/"),
	"vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
}

const viteConfig = defineConfig((mode: ConfigEnv) => {
	const env = loadEnv(mode.mode, process.cwd())
	console.log(env)
	// 判断是否开发环境
	const isDev = env.ENV === "development"
	const isServe = mode.command === "serve"
	// 内网穿透：HTTPS 隧道不适合 vite dev（大文件 ERR_CONTENT_LENGTH_MISMATCH），请用 npm run preview:tunnel
	const tunnelHost = env.VITE_TUNNEL_HOST?.trim()
	const tunnelMode = !!tunnelHost || env.VITE_TUNNEL_MODE === "true"
	const plugins = [
		vue(), // Vue 插件
		svgBuilder("./src/assets/icons/"), // 将 SVG 文件转换成 Vue 组件
		vueSetupExtend(), // setup语法糖增强插件
		AutoImport({
			imports: ["vue", "vue-router", "pinia"], // 自动导入的依赖库数组
			dts: "./auto-imports.d.ts", // 自动导入类型定义文件路径
		}),
		createStyleImportPlugin({
			resolves: [VxeTableResolve()], // 配置vxetable 按需加载
		}),
		topLevelAwait({
			promiseExportName: "__tla", // TLA Promise 变量名
			promiseImportName: (i) => `__tla_${i}`, // TLA Promise 导入名
		}),
	]
	if (!isServe) {
		plugins.push(
			viteCompression({
				deleteOriginFile: false, // 压缩后删除原来的文件
			}),
		)
	}
	return {
		plugins,
		root: process.cwd(), // 项目根目录
		resolve: { alias }, // 路径别名配置
		base: mode.command === "serve" ? "./" : env.VITE_PUBLIC_PATH,
		optimizeDeps: {
			include: ["element-plus/es/locale/lang/zh-cn", "element-plus/es/locale/lang/en", "vxe-pc-ui", "vxe-table"],
		},
		preview: {
			host: "0.0.0.0",
			port: env.VITE_PORT as unknown as number,
			allowedHosts: true,
			proxy: {
				"/api/gen": {
					target: env.VITE_IS_MICRO === "true" ? env.VITE_ADMIN_PROXY_PATH : env.VITE_GEN_PROXY_PATH,
					changeOrigin: true,
					rewrite: (path) => path.replace(/^\/api/, ""),
				},
				"/api": {
					target: env.VITE_ADMIN_PROXY_PATH,
					ws: true,
					changeOrigin: true,
					rewrite: (path) => path.replace(/^\/api/, ""),
				},
				"^/ws/info/.*": {
					target: env.VITE_ADMIN_PROXY_PATH,
					ws: true,
					changeOrigin: true,
				},
			},
		},
		server: {
			host: "0.0.0.0", // 服务器地址
			port: env.VITE_PORT as unknown as number, // 服务器端口号
			open: env.VITE_OPEN === "true", // 是否自动打开浏览器
			// 内网穿透（花生壳/ngrok 等）域名访问 dev 时须放行 Host，否则 Blocked request
			allowedHosts: isDev
				? true
				: [
						"localhost",
						".vicp.fun",
						...(env.VITE_ALLOWED_HOSTS?.split(",")
							.map((h) => h.trim())
							.filter(Boolean) ?? []),
				  ],
			// 穿透域名不要用 vite dev + HMR，会 ERR_CONTENT_LENGTH_MISMATCH；用 preview:tunnel
			hmr: tunnelMode
				? false
				: {
						overlay: false,
				  },
			proxy: {
				"/api/gen": {
					//单体架构下特殊处理代码生成模块代理
					target: env.VITE_IS_MICRO === "true" ? env.VITE_ADMIN_PROXY_PATH : env.VITE_GEN_PROXY_PATH,
					changeOrigin: true,
					rewrite: (path) => path.replace(/^\/api/, ""),
				},
				"/api": {
					target: env.VITE_ADMIN_PROXY_PATH, // 目标服务器地址
					ws: true, // 是否启用 WebSocket
					changeOrigin: true, // 是否修改请求头中的 Origin 字段
					rewrite: (path) => path.replace(/^\/api/, ""),
				},
				"^/ws/info/.*": {
					target: env.VITE_ADMIN_PROXY_PATH, // 目标服务器地址
					ws: true, // 是否启用 WebSocket
					changeOrigin: true,
				},
				// 本地调试腾讯 WebService：浏览器走同源代理，转发时带已白名单的生产域名 Referer
				// （localhost 写进腾讯白名单经常仍 110，生产部署仍用浏览器直连 JSONP）
				"/qqmap": {
					target: "https://apis.map.qq.com",
					changeOrigin: true,
					rewrite: (path) => path.replace(/^\/qqmap/, ""),
					configure: (proxy) => {
						proxy.on("proxyReq", (proxyReq) => {
							proxyReq.setHeader("Referer", "https://zianxin.com/")
							proxyReq.setHeader("Origin", "https://zianxin.com")
						})
					},
				},
			},
		},
		build: {
			outDir: "dist", // 打包输出目录//
			chunkSizeWarningLimit: 1500, // 代码分包阈值
			// 开发使用 esbuild 更快，生产环境打包使用 terser 可以删除更多注释
			minify: isDev ? "esbuild" : "terser",
			terserOptions: {
				compress: {
					drop_console: true, // 删除 console
					drop_debugger: true, // 删除 debugger
				},
				format: {
					comments: false, // 删除所有注释
				},
			},
			rollupOptions: {
				output: {
					entryFileNames: `assets/[name].[hash].js`,
					chunkFileNames: `assets/[name].[hash].js`,
					assetFileNames: `assets/[name].[hash].[ext]`,
					compact: true,
					manualChunks: {
						vue: ["vue", "vue-router", "pinia"],
						echarts: ["echarts"],
					},
				},
			},
		},
		css: { preprocessorOptions: { css: { charset: false } } },
		define: {
			__VUE_I18N_LEGACY_API__: JSON.stringify(false),
			__VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
			__INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
			__VERSION__: JSON.stringify(process.env.npm_package_version),
			__NEXT_NAME__: JSON.stringify(process.env.npm_package_name),
		},
	}
})

export default viteConfig