From c20d74ddc19d2006a82874fd4db54a2439b7692f Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Thu, 28 Mar 2024 23:03:54 +0800
Subject: [PATCH] refactor: modify proxy setting

---
 .env.dev                           |  1 +
 build/proxy.ts                     | 47 +++++++++++++++---------------
 service.config.ts                  | 12 ++++++++
 src/components/common/ErrorTip.vue |  2 +-
 src/service/http/index.ts          |  7 +++--
 src/typings/env.d.ts               |  7 -----
 vite.config.ts                     |  5 ++--
 7 files changed, 44 insertions(+), 37 deletions(-)
 create mode 100644 service.config.ts

diff --git a/.env.dev b/.env.dev
index c32edbc..a6f9e31 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1 +1,2 @@
+# 是否开启服务接口代理 Y | N
 VITE_HTTP_PROXY=N
diff --git a/build/proxy.ts b/build/proxy.ts
index 19fe5fd..5b62bc2 100644
--- a/build/proxy.ts
+++ b/build/proxy.ts
@@ -1,33 +1,32 @@
 import type { ProxyOptions } from 'vite'
+import { mapEntries } from 'radash'
 
-/** 不同请求服务的环境配置 */
-export const proxyConfig: Record<ServiceEnvType, ServiceEnvConfig> = {
-  dev: {
-    url: 'https://mock.apifox.com/m1/4071143-0-default',
-    urlPattern: '/url-pattern',
-  },
-  test: {
-    url: 'http://localhost:8080',
-    urlPattern: '/url-pattern',
-  },
-  prod: {
-    url: 'https://mock.apifox.com/m1/4071143-0-default',
-    urlPattern: '/url-pattern',
-  },
+export function generateProxyPattern(envConfig: Record<string, string>) {
+  return mapEntries(envConfig, (key, value) => {
+    return [
+      key,
+      {
+        value,
+        proxy: `/proxy-${key}`,
+      },
+    ]
+  })
 }
 
 /**
  * @description: 生成vite代理字段
  * @param {*} envConfig - 环境变量配置
  */
-export function createViteProxy(envConfig: ServiceEnvConfig) {
-  const proxy: Record<string, string | ProxyOptions> = {
-    [envConfig.urlPattern]: {
-      target: envConfig.url,
-      changeOrigin: true,
-      rewrite: path => path.replace(new RegExp(`^${envConfig.urlPattern}`), ''),
-    },
-  }
-
-  return proxy
+export function createViteProxy(envConfig: Record<string, string>) {
+  const proxyMap = generateProxyPattern(envConfig)
+  return mapEntries(proxyMap, (key, value) => {
+    return [
+      value.proxy,
+      {
+        target: value.value,
+        changeOrigin: true,
+        rewrite: (path: string) => path.replace(new RegExp(`^${value.proxy}`), ''),
+      },
+    ]
+  }) as Record<string, string | ProxyOptions>
 }
diff --git a/service.config.ts b/service.config.ts
new file mode 100644
index 0000000..86b60a6
--- /dev/null
+++ b/service.config.ts
@@ -0,0 +1,12 @@
+/** 不同请求服务的环境配置 */
+export const serviceConfig: Record<ServiceEnvType, Record<string, string>> = {
+  dev: {
+    url: 'https://mock.apifox.com/m1/4071143-0-default',
+  },
+  test: {
+    url: 'https://mock.apifox.com/m1/4071143-0-default',
+  },
+  prod: {
+    url: 'https://mock.apifox.com/m1/4071143-0-default',
+  },
+}
diff --git a/src/components/common/ErrorTip.vue b/src/components/common/ErrorTip.vue
index 7d5656e..d3a24d9 100644
--- a/src/components/common/ErrorTip.vue
+++ b/src/components/common/ErrorTip.vue
@@ -7,7 +7,7 @@ const router = useRouter()
 </script>
 
 <template>
-  <div class="flex-col-center h-full">
+  <div class="flex-col-center">
     <img
       v-if="type === '403'"
       src="@/assets/svg/error-403.svg"
diff --git a/src/service/http/index.ts b/src/service/http/index.ts
index 0aacb51..fbd6f4f 100644
--- a/src/service/http/index.ts
+++ b/src/service/http/index.ts
@@ -1,12 +1,13 @@
 import { createAlovaInstance } from './alova'
-import { proxyConfig } from '@/../build/proxy'
+import { serviceConfig } from '@/../service.config'
+import { generateProxyPattern } from '@/../build/proxy'
 
-const { url, urlPattern } = proxyConfig[import.meta.env.MODE]
+const { url } = generateProxyPattern(serviceConfig[import.meta.env.MODE])
 
 const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y' || false
 
 export const alovaInstance = createAlovaInstance({
-  baseURL: isHttpProxy ? urlPattern : url,
+  baseURL: isHttpProxy ? url.proxy : url.value,
 })
 
 export const blankInstance = createAlovaInstance({
diff --git a/src/typings/env.d.ts b/src/typings/env.d.ts
index 156d2c8..d464233 100644
--- a/src/typings/env.d.ts
+++ b/src/typings/env.d.ts
@@ -6,13 +6,6 @@
  */
 type ServiceEnvType = 'dev' | 'test' | 'prod'
 
-/** 后台服务的环境配置 */
-interface ServiceEnvConfig {
-  /** 请求地址 */
-  url: string
-  /** 匹配路径的正则字符串, 用于拦截地址转发代理(任意以 /开头 + 字符串, 单个/不起作用) */
-  urlPattern: '/url-pattern'
-}
 interface ImportMetaEnv {
   /** 项目基本地址 */
   readonly VITE_BASE_URL: string
diff --git a/vite.config.ts b/vite.config.ts
index f4fcfb1..9aad03b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,14 @@
 import { resolve } from 'node:path'
 import { defineConfig, loadEnv } from 'vite'
 import { createVitePlugins } from './build/plugins'
-import { createViteProxy, proxyConfig } from './build/proxy'
+import { createViteProxy } from './build/proxy'
+import { serviceConfig } from './service.config'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   // 根据当前工作目录中的 `mode` 加载 .env 文件
   const env = loadEnv(mode, __dirname, '') as ImportMetaEnv
-  const envConfig = proxyConfig[mode as ServiceEnvType]
+  const envConfig = serviceConfig[mode as ServiceEnvType]
 
   return {
     base: env.VITE_BASE_URL,