perf: 接口配置硬编码调整到环境变量 (#445)

* perf: 接口配置硬编码调整到环境变量

* perf: 接口配置硬编码调整到环境变量

.env

@@ -1,2 +1,5 @@
 # 打包路径 根据项目不同按需配置
 VITE_BASE_URL = /
+VITE_IS_REQUEST_PROXY = true
+VITE_API_URL = https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com
+VITE_API_URL_PREFIX = /api

.env.development

@@ -1,2 +1,5 @@
 # 打包路径
 VITE_BASE_URL = /
+VITE_IS_REQUEST_PROXY = true
+VITE_API_URL = https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com
+VITE_API_URL_PREFIX = /api

.env.site

@@ -1,2 +1,5 @@
 # 打包路径 根据项目不同按需配置
 VITE_BASE_URL = https://static.tdesign.tencent.com/starter/vue-next/
+VITE_IS_REQUEST_PROXY = true
+VITE_API_URL = https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com
+VITE_API_URL_PREFIX = /api

.env.test

@@ -0,0 +1,5 @@
+# 打包路径 根据项目不同按需配置
+VITE_BASE_URL = /
+VITE_IS_REQUEST_PROXY = true
+VITE_API_URL = https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com
+VITE_API_URL_PREFIX = /api

.gitignore

@@ -21,3 +21,5 @@ yarn-error.log
 yarn.lock
 package-lock.json
 pnpm-lock.yaml
+.env.local
+.env.*.local

src/config/proxy.ts

@@ -1,27 +0,0 @@
-export default {
-  isRequestProxy: true,
-  development: {
-    // 开发环境接口请求
-    host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
-    // 开发环境 cdn 路径
-    cdn: '',
-  },
-  test: {
-    // 测试环境接口地址
-    host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
-    // 测试环境 cdn 路径
-    cdn: '',
-  },
-  release: {
-    // 正式环境接口地址
-    host: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
-    // 正式环境 cdn 路径
-    cdn: '',
-  },
-  site: {
-    // TDesign部署特殊需要 与release功能一致
-    host: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
-    // 正式环境 cdn 路径
-    cdn: '',
-  },
-};

src/types/env.d.ts

@@ -0,0 +1,5 @@
+export interface ImportMetaEnv {
+  readonly VITE_IS_REQUEST_PROXY: string;
+  readonly VITE_API_URL: string;
+  readonly VITE_API_URL_PREFIX: string;
+}

src/utils/request/index.ts

@@ -4,7 +4,6 @@ import merge from 'lodash/merge';
 import type { InternalAxiosRequestConfig } from 'axios';
 import type { AxiosTransform, CreateAxiosOptions } from './AxiosTransform';
 import { VAxios } from './Axios';
-import proxy from '@/config/proxy';
 import { joinTimestamp, formatRequestDate, setObjToUrlParams } from './utils';
 import { TOKEN_NAME } from '@/config/global';
 import { ContentTypeEnum } from '@/constants';
@@ -12,7 +11,7 @@ import { ContentTypeEnum } from '@/constants';
 const env = import.meta.env.MODE || 'development';
 
 // 如果是mock模式 或 没启用直连代理 就不配置host 会走本地Mock拦截 或 Vite 代理
-const host = env === 'mock' || !proxy.isRequestProxy ? '' : proxy[env].host;
+const host = env === 'mock' || import.meta.env.VITE_IS_REQUEST_PROXY !== 'true' ? '' : import.meta.env.VITE_API_URL;
 
 // 数据处理，方便区分多种处理方式
 const transform: AxiosTransform = {
@@ -172,7 +171,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           // 接口前缀
           // 例如: https://www.baidu.com/api
           // urlPrefix: '/api'
-          urlPrefix: '/api',
+          urlPrefix: import.meta.env.VITE_API_URL_PREFIX,
           // 是否返回原生响应头 比如：需要获取响应头时使用该属性
           isReturnNativeResponse: false,
           // 需要对返回数据进行处理

vite.config.ts

@@ -10,7 +10,7 @@ const CWD = process.cwd();
 
 // https://vitejs.dev/config/
 export default ({ mode }: ConfigEnv): UserConfig => {
-  const { VITE_BASE_URL } = loadEnv(mode, CWD);
+  const { VITE_BASE_URL, VITE_API_URL_PREFIX } = loadEnv(mode, CWD);
   return {
     base: VITE_BASE_URL,
     resolve: {
@@ -45,7 +45,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       port: 3002,
       host: '0.0.0.0',
       proxy: {
-        '/api': 'http://127.0.0.1:3000/',
+        [VITE_API_URL_PREFIX]: 'http://127.0.0.1:3000/',
       },
     },
   };