fixbug: 🐛 接口代理无法使用

.env

@@ -1,2 +1,8 @@
-# 请求api地址
+# 线上环境接口地址
-BUNNY_APP_URL=http://localhost:8088/xxx
+VITE_APP_URL="http://localhost:8800"
+# 线上环境接口地址
+VITE_APP_MOCK_URL="http://localhost:8800"
+# 端口号
+VITE_APP_PORT=6262
+# 是否使用CDN加速
+VITE_CDN=true

.env.development

@@ -1,2 +1,8 @@
-# 请求api地址
+# 线上环境接口地址
-BUNNY_APP_URL=http://localhost:8088/development
+VITE_APP_URL="http://localhost:8800"
+# 线上环境接口地址
+VITE_APP_MOCK_URL="http://localhost:8800"
+# 端口号
+VITE_APP_PORT=6262
+# 是否使用CDN加速
+VITE_CDN=true

.env.production

@@ -1,2 +1,8 @@
-# 请求api地址
+# 线上环境接口地址
-BUNNY_APP_URL=http://localhost:8088/prod
+VITE_APP_URL="http://localhost:8800"
+# 线上环境接口地址
+VITE_APP_MOCK_URL="http://localhost:8800"
+# 端口号
+VITE_APP_PORT=6262
+# 是否使用CDN加速
+VITE_CDN=true

build/info.ts

@@ -10,9 +10,9 @@ dayjs.extend(duration);
 const welcomeMessage = gradientString('cyan', 'magenta').multiline(
 	`您好! 欢迎使用 bunny-admin 后台管理 
 项目开发访问地址如下：
-http://localhost:8202/
+http://localhost:6262/
 项目生产访问地址如下：
-http://localhost:8202/`,
+http://localhost:6262/`,
 );
 
 const boxenOptions: BoxenOptions = {

build/plugins.ts

@@ -8,7 +8,6 @@ import { viteMockServe } from 'vite-plugin-mock';
 import { viteBuildInfo } from './info';
 
 export function getPluginsList(): PluginOption[] {
-	const lifecycle = process.env.npm_lifecycle_event;
 	return [
 		vue(),
 		legacy({
@@ -37,7 +36,7 @@ export function getPluginsList(): PluginOption[] {
 		vueJsx(),
 		compression(),
 		viteBuildInfo(),
-		cdn,
+		process.env.VITE_CDN ? cdn : null,
 		viteMockServe({ mockPath: 'src/mock' }),
 	];
 }

build/server.ts

@@ -8,12 +8,12 @@ export const serverOptions = () => {
 		cors: true,
 		proxy: {
 			'/api': {
-				target: process.env.BUNNY_APP_URL,
+				target: process.env.VITE_APP_URL,
 				changeOrigin: true,
 				rewrite: (path: string) => path.replace(/^\/api/, '/api'),
 			},
 			'/mock': {
-				target: process.env.BUNNY_APP_URL,
+				target: process.env.VITE_APP_MOCK_URL,
 				changeOrigin: true,
 				rewrite: (path: string) => path.replace(/^\/mock/, '/mock'),
 			},

build/utils.ts

@@ -1,10 +1,15 @@
 import { readdir, stat } from 'node:fs';
-import { formatBytes, sum } from '@pureadmin/utils';
+import { formatBytes, Recordable, sum } from '@pureadmin/utils';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+/** 启动`node`进程时所在工作目录的绝对路径 */
+const root: string = process.cwd();
 
 const fileListTotal: number[] = [];
 
 /** 获取指定文件夹中所有文件的总大小 */
-const getPackageSize = options => {
+const getPackageSize = (options: any) => {
 	const { folder = 'dist', callback, format = true } = options;
 	readdir(folder, (err, files: string[]) => {
 		if (err) throw err;
@@ -30,4 +35,53 @@ const getPackageSize = options => {
 	});
 };
 
-export { getPackageSize };
+/**
+ * @description 根据可选的路径片段生成一个新的绝对路径
+ * @param dir 路径片段，默认`build`
+ * @param metaUrl 模块的完整`url`，如果在`build`目录外调用必传`import.meta.url`
+ */
+const pathResolve = (dir = '.', metaUrl = import.meta.url) => {
+	// 当前文件目录的绝对路径
+	const currentFileDir = dirname(fileURLToPath(metaUrl));
+	// build 目录的绝对路径
+	const buildDir = resolve(currentFileDir, 'build');
+	// 解析的绝对路径
+	const resolvedPath = resolve(currentFileDir, dir);
+	// 检查解析的绝对路径是否在 build 目录内
+	if (resolvedPath.startsWith(buildDir)) {
+		// 在 build 目录内，返回当前文件路径
+		return fileURLToPath(metaUrl);
+	}
+	// 不在 build 目录内，返回解析后的绝对路径
+	return resolvedPath;
+};
+
+/** 处理环境变量 */
+const wrapperEnv = (envConf: Recordable): any => {
+	// TODO 默认值
+	const ret: any = {
+		VITE_APP_PORT: 6262,
+		VITE_APP_URL: '',
+		VITE_APP_MOCK_URL: '',
+		VITE_CDN: false,
+	};
+
+	for (const envName of Object.keys(envConf)) {
+		let realName = envConf[envName].replace(/\\n/g, '\n');
+		realName = realName === 'true' ? true : realName === 'false' ? false : realName;
+
+		if (envName === 'VITE_PORT') {
+			realName = Number(realName);
+		}
+		ret[envName] = realName;
+		if (typeof realName === 'string') {
+			process.env[envName] = realName;
+		} else if (typeof realName === 'object') {
+			process.env[envName] = JSON.stringify(realName);
+		}
+	}
+
+	return ret;
+};
+
+export { getPackageSize, pathResolve, root, wrapperEnv };

tsconfig.json

@@ -1,50 +1,55 @@
 {
-	"compilerOptions": {
+  "compilerOptions": {
-		// 是否在表达式和声明上有隐含的any类型时报错
+    // 是否在表达式和声明上有隐含的any类型时报错
-		"noImplicitAny": false,
+    "noImplicitAny": false,
-		"target": "ES2020",
+    "target": "ES2020",
-		"useDefineForClassFields": true,
+    "useDefineForClassFields": true,
-		"module": "ESNext",
+    "module": "ESNext",
-		"lib": [
+    "lib": [
-			"ES2020",
+      "ES2020",
-			"DOM",
+      "DOM",
-			"DOM.Iterable"
+      "DOM.Iterable"
-		],
+    ],
-		"baseUrl": ".",
+    "baseUrl": ".",
-		"skipLibCheck": true,
+    "skipLibCheck": true,
-		"types": [
+    "types": [
-			// "webpack-env"
+      // "webpack-env"
-			"node"
+      "node"
-		],
+    ],
-		"paths": {
+    "paths": {
-			"@/*": [
+      "@/*": [
-				"src/*"
+        "src/*"
-			]
+      ],
-		},
+      "@build/*": [
-		/* Bundler mode */
+        "build/*"
-		"moduleResolution": "bundler",
+      ]
-		"allowImportingTsExtensions": true,
+    },
-		"resolveJsonModule": true,
+    /* Bundler mode */
-		"isolatedModules": true,
+    "moduleResolution": "bundler",
-		"noEmit": true,
+    "allowImportingTsExtensions": true,
-		"jsx": "preserve",
+    "resolveJsonModule": true,
-		/* Linting */
+    "isolatedModules": true,
-		"strict": true,
+    "noEmit": true,
-		"noUnusedLocals": true,
+    "jsx": "preserve",
-		"noUnusedParameters": true,
+    /* Linting */
-		"noFallthroughCasesInSwitch": true
+    "strict": true,
-	},
+    "noUnusedLocals": true,
-	"include": [
+    "noUnusedParameters": true,
-		"src/**/*.ts",
+    "noFallthroughCasesInSwitch": true
-		"src/**/*.tsx",
+  },
-		"src/**/*.vue"
+  "include": [
-	],
+    "src/**/*.ts",
-	"exclude": [
+    "src/**/*.tsx",
-		"node_modules"
+    "src/**/*.vue",
-	],
+    "build/*.ts",
-	"references": [
+    "vite.config.ts"
-		{
+  ],
-			"path": "./tsconfig.node.json"
+  "exclude": [
-		}
+    "node_modules"
-	]
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

tsconfig.node.json

@@ -7,5 +7,7 @@
     "allowSyntheticDefaultImports": true,
     "strict": true
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }

vite.config.ts

@@ -1,17 +1,20 @@
 import { resolve } from 'path';
-import { defineConfig, UserConfig } from 'vite';
+import { ConfigEnv, UserConfigExport } from 'vite';
-import { buildEnvironment } from './build/buildEnv';
-import { exclude, include } from './build/optimize';
 import { getPluginsList } from './build/plugins';
+import { buildEnvironment } from './build/buildEnv';
 import { serverOptions } from './build/server';
+import { exclude, include } from './build/optimize';
+import { pathResolve } from './build/utils.ts';
 
-export default defineConfig(
+export default ({ mode }: ConfigEnv): UserConfigExport => {
-	(): UserConfig => ({
+	// const {  VITE_APP_URL } = wrapperEnv(loadEnv(mode, root));
-		envPrefix: 'BUNNY',
+
+	return {
 		resolve: {
 			alias: {
 				'@': resolve(__dirname, './src'),
 				'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
+				'@build': pathResolve(),
 			},
 		},
 		optimizeDeps: { include, exclude },
@@ -25,5 +28,5 @@ export default defineConfig(
 		},
 		// 配置构建过程的选项，例如是否生成压缩文件和源映射
 		build: buildEnvironment(),
-	}),
+	};
-);
+};