feat(projects): 添加网络代理

.env

@@ -5,3 +5,5 @@ VITE_APP_NAME=SoybeanAdmin
 VITE_APP_TITLE=Soybean管理系统
 
 VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版
+
+VITE_HTTP_PROXY=true

.env-config.ts

@@ -1,22 +1,38 @@
 /** 请求环境配置 */
 type ServiceEnv = Record<
-  Service.HttpEnv,
+  EnvType,
   {
-    /** 请求环境 */
-    env: Service.HttpEnv;
     /** 请求地址 */
     url: string;
+    /** 代理地址 */
+    proxy: string;
   }
 >;
 
 /** 请求的环境 */
-export const serviceEnv: ServiceEnv = {
+const serviceEnvConfig: ServiceEnv = {
+  dev: {
+    url: 'http://localhost:8080',
+    proxy: '/api',
+  },
   test: {
-    env: 'test',
-    url: 'http://www.baidu.com',
+    url: 'http://localhost:8080',
+    proxy: '/api',
   },
   prod: {
-    env: 'prod',
-    url: 'http://www.baidu.com',
+    url: 'http://localhost:8080',
+    proxy: '/api',
   },
 };
+
+/**
+ * 获取环境配置
+ * @param env 环境描述
+ */
+export function getEnvConfig(env: ImportMetaEnv) {
+  const { VITE_ENV_TYPE = 'dev' } = env;
+  const envConfig = {
+    http: serviceEnvConfig[VITE_ENV_TYPE],
+  };
+  return envConfig;
+}

package.json

@@ -2,10 +2,12 @@
   "name": "soybean-admin",
   "version": "0.9.2",
   "scripts": {
-    "dev": "cross-env VITE_HTTP_ENV=test vite",
-    "dev:prod": "cross-env VITE_HTTP_ENV=prod vite",
-    "build": "npm run typecheck && cross-env VITE_HTTP_ENV=prod vite build",
-    "build:test": "npm run typecheck && cross-env VITE_HTTP_ENV=test vite build",
+    "dev": "cross-env VITE_ENV_TYPE=dev vite",
+    "dev:test": "cross-env VITE_ENV_TYPE=test vite",
+    "dev:prod": "cross-env VITE_ENV_TYPE=prod vite",
+    "build": "npm run typecheck && cross-env VITE_ENV_TYPE=prod vite build",
+    "build:dev": "npm run typecheck && cross-env VITE_ENV_TYPE=dev vite build",
+    "build:test": "npm run typecheck && cross-env VITE_ENV_TYPE=test vite build",
     "build:vercel": "cross-env VITE_HASH_ROUTE=true vite build",
     "preview": "vite preview --port 5050",
     "typecheck": "vue-tsc --noEmit",

src/composables/common/index.ts

@@ -1,3 +0,0 @@
-export * from './system';
-export * from './router';
-export * from './layout';

src/composables/events/index.ts

@@ -1 +0,0 @@
-export {};

src/composables/index.ts

@@ -1 +1,3 @@
-export * from './common';
+export * from './system';
+export * from './router';
+export * from './layout';

src/config/business/index.ts

@@ -1 +0,0 @@
-export {};

src/config/common/index.ts

@@ -1,3 +0,0 @@
-export * from './service';
-export * from './regexp';
-export * from './map-sdk';

src/config/index.ts

@@ -1 +1,3 @@
-export * from './common';
+export * from './service';
+export * from './regexp';
+export * from './map-sdk';

src/service/api/demo.ts

@@ -0,0 +1,6 @@
+import { request } from '../request';
+
+/** 测试请求代理 */
+export function fetchTestProxy() {
+  return request.get('/test');
+}

src/service/api/index.ts

@@ -1 +1,2 @@
 export * from './auth';
+export * from './demo';

src/service/request/helpers.ts

@@ -7,10 +7,10 @@ import { fetchUpdateToken } from '../api';
  * 刷新token
  * @param axiosConfig - token失效时的请求配置
  */
-export async function refreshToken(axiosConfig: AxiosRequestConfig) {
+export async function handleRefreshToken(axiosConfig: AxiosRequestConfig) {
   const { resetAuthStore } = useAuthStore();
-  const rToken = getRefreshToken();
-  const { data } = await fetchUpdateToken(rToken);
+  const refreshToken = getRefreshToken();
+  const { data } = await fetchUpdateToken(refreshToken);
   if (data) {
     setToken(data.token);
     setRefreshToken(data.refreshToken);

src/service/request/index.ts

@@ -1,10 +1,9 @@
 import { createRequest } from './request';
-import { serviceEnv } from '~/.env-config';
+import { getEnvConfig } from '~/.env-config';
 
-const { VITE_HTTP_ENV = 'test' } = import.meta.env;
+const { http } = getEnvConfig(import.meta.env);
+const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'true';
 
-const { url } = serviceEnv[VITE_HTTP_ENV];
-
-export const request = createRequest({ baseURL: url });
+export const request = createRequest({ baseURL: isHttpProxy ? http.proxy : http.url });
 
 export const mockRequest = createRequest({ baseURL: '/mock' });

src/service/request/instance.ts

@@ -9,7 +9,7 @@ import {
   handleBackendError,
   handleServiceResult,
 } from '@/utils';
-import { refreshToken } from './helpers';
+import { handleRefreshToken } from './helpers';
 
 /**
  * 封装axios请求类
@@ -71,7 +71,7 @@ export default class CustomAxiosInstance {
 
           // token失效, 刷新token
           if (REFRESH_TOKEN_CODE.includes(backend[codeKey])) {
-            const config = await refreshToken(response.config);
+            const config = await handleRefreshToken(response.config);
             if (config) {
               return this.instance.request(config);
             }

src/typings/env.d.ts

@@ -7,6 +7,9 @@ declare module '*.vue' {
   export default component;
 }
 
+/** env环境类型 */
+type EnvType = 'dev' | 'test' | 'prod';
+
 interface ImportMetaEnv {
   /** 项目基本地址 */
   readonly VITE_BASE_URL: string;
@@ -16,10 +19,12 @@ interface ImportMetaEnv {
   readonly VITE_APP_TITLE: string;
   /** 项目描述 */
   readonly VITE_APP_DESC: string;
+  /** vite环境类型 */
+  readonly VITE_ENV_TYPE?: EnvType;
+  /** 开启请求代理 */
+  readonly VITE_HTTP_PROXY?: 'true' | 'false';
   /** 是否开启打包文件大小结果分析 */
-  readonly VITE_VISUALIZER: 'true' | 'false';
-  /** 网路请求环境类型 */
-  readonly VITE_HTTP_ENV?: Service.HttpEnv;
+  readonly VITE_VISUALIZER?: 'true' | 'false';
   /** hash路由模式 */
   readonly VITE_HASH_ROUTE?: 'true' | 'false';
 }

tsconfig.json

@@ -4,6 +4,7 @@
 		"src/typings/**/*.d.ts",
 		"src/**/*",
 		"src/**/*.vue",
+		"vite.config.*",
 		"mock/**/*.ts",
 		"build/**/*.ts",
 		".env-config.ts",
@@ -18,11 +19,6 @@
 			"@/*": ["./src/*"],
 			"~/*": ["./*"]
 		},
-		"types": ["naive-ui/volar"]
-	},
-	"references": [
-    {
-      "path": "./tsconfig.vite-config.json"
-    }
-  ]
+		"types": ["node","naive-ui/volar"]
+	}
 }

tsconfig.vite-config.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*"],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node"]
-  }
-}

vite.config.ts

@@ -1,6 +1,7 @@
 import { fileURLToPath } from 'url';
 import { defineConfig, loadEnv } from 'vite';
 import { setupVitePlugins, define } from './build';
+import { getEnvConfig } from './.env-config';
 
 export default defineConfig((configEnv) => {
   const viteEnv = loadEnv(configEnv.mode, `.env.${configEnv.mode}`) as ImportMetaEnv;
@@ -8,6 +9,8 @@ export default defineConfig((configEnv) => {
   const srcPath = fileURLToPath(new URL('./src', import.meta.url));
   const rootPath = fileURLToPath(new URL('./', import.meta.url));
 
+  const { http } = getEnvConfig(viteEnv);
+
   return {
     base: viteEnv.VITE_BASE_URL,
     resolve: {
@@ -32,6 +35,13 @@ export default defineConfig((configEnv) => {
       host: '0.0.0.0',
       port: 3200,
       open: true,
+      proxy: {
+        [http.proxy]: {
+          target: http.url,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(new RegExp(`^${http.proxy}`), ''),
+        },
+      },
     },
     build: {
       brotliSize: false,