feat(Vite Config): 新增环境变量

1. 修复环境变量类型丢失
2. 修改错误变量名写法
3. 调整配置顺序，将常用配置向上移动
4. 将配置项抽出到环境变量文件
5. 对环境变量进行注释描述类型补全
6. 环境变量文件解耦，防止排错成本增加

.env

@@ -1,5 +1,4 @@
-# 打包路径 根据项目不同按需配置
+# 项目标题
-VITE_BASE_URL = /
+VITE_BASE_TITLE='TDesign Vue Next Starter'
-VITE_IS_REQUEST_PROXY = true
+# 项目命名空间 用于隔离不同项目的样式或配置
-VITE_API_URL = https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com
+VITE_BASE_NAMESPACE=tdesign-starter
-VITE_API_URL_PREFIX = /api

.env.development

@@ -1,5 +1,12 @@
-# 打包路径
+# 打包路径 根据项目不同按需配置
-VITE_BASE_URL = /
+VITE_BASE_URL=/
-VITE_IS_REQUEST_PROXY = true
+# 运行端口
-VITE_API_URL = https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com
+VITE_BASE_PORT=3002
-VITE_API_URL_PREFIX = /api
+# 是否使用请求库代理 如果启用会跳过Vite自带代理
+VITE_USE_REQUEST_PROXY=true
+# 是否使用Vite Mock 使用请求库代理时失效
+VITE_USE_MOCK=false
+# 请求接口地址
+VITE_API_URL=https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com
+# 请求接口前缀
+VITE_API_URL_PREFIX=/api

.env.site

@@ -1,5 +1,12 @@
 # 打包路径 根据项目不同按需配置
-VITE_BASE_URL = https://static.tdesign.tencent.com/starter/vue-next/
+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_BASE_PORT=3002
-VITE_API_URL_PREFIX = /api
+# 是否使用请求库代理 如果启用会跳过Vite自带代理
+VITE_USE_REQUEST_PROXY=true
+# 是否使用Vite Mock 使用请求库代理时失效
+VITE_USE_MOCK=false
+# 请求接口地址
+VITE_API_URL=https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com
+# 请求接口前缀
+VITE_API_URL_PREFIX=/api

.env.test

@@ -1,5 +1,12 @@
 # 打包路径 根据项目不同按需配置
-VITE_BASE_URL = /
+VITE_BASE_URL=/
-VITE_IS_REQUEST_PROXY = true
+# 运行端口
-VITE_API_URL = https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com
+VITE_BASE_PORT=3002
-VITE_API_URL_PREFIX = /api
+# 是否使用请求库代理 如果启用会跳过Vite自带代理
+VITE_USE_REQUEST_PROXY=true
+# 是否使用Vite Mock 使用请求库代理时失效
+VITE_USE_MOCK=false
+# 请求接口地址
+VITE_API_URL=https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com
+# 请求接口前缀
+VITE_API_URL_PREFIX=/api

src/types/env.d.ts

@@ -1,5 +1,58 @@
-export interface ImportMetaEnv {
+/// <reference types="vite/client" />
-  readonly VITE_IS_REQUEST_PROXY: string;
+
+// tips: dotenv只会把变量解析为字符串，因此使用过程中需要注意类型转换
+interface ImportMetaEnv {
+  /**
+   * 项目标题
+   * @example TDesign Vue Next Starter
+   */
+  readonly VITE_BASE_TITLE: string;
+  /**
+   * 项目命名空间
+   *
+   * 用于隔离不同项目的样式或配置
+   * @example tdesign-starter
+   */
+  readonly VITE_BASE_NAMESPACE: string;
+  /**
+   * 运行端口
+   * @default 3000
+   */
+  readonly VITE_BASE_PORT: string;
+  /**
+   * 打包路径
+   *
+   * 非必要不建议修改
+   * @default /
+   */
+  readonly VITE_BASE_URL: string;
+
+  /**
+   * 是否使用请求库代理
+   *
+   * 如果启用会跳过Vite自带代理
+   * @default true
+   */
+  readonly VITE_USE_REQUEST_PROXY: string;
+  /**
+   * 是否使用Vite Mock
+   *
+   * 使用请求库代理时失效
+   * @default false
+   */
+  readonly VITE_USE_MOCK: string;
+  /**
+   * 请求的接口地址
+   * @example http://127.0.0.1:3000
+   */
   readonly VITE_API_URL: string;
+  /**
+   * 请求的接口前缀
+   * @example /api
+   */
   readonly VITE_API_URL_PREFIX: string;
 }
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

vite.config.ts

@@ -6,11 +6,12 @@ import { ConfigEnv, loadEnv, UserConfig } from 'vite';
 import { viteMockServe } from 'vite-plugin-mock';
 import svgLoader from 'vite-svg-loader';
 
-const CWD = process.cwd();
+const cwd = process.cwd();
 
 // https://vitejs.dev/config/
 export default ({ mode }: ConfigEnv): UserConfig => {
-  const { VITE_BASE_URL, VITE_API_URL_PREFIX } = loadEnv(mode, CWD);
+  const { VITE_BASE_PORT, VITE_BASE_URL, VITE_USE_MOCK, VITE_API_URL, VITE_API_URL_PREFIX }: Partial<ImportMetaEnv> =
+    loadEnv(mode, cwd);
   return {
     base: VITE_BASE_URL,
     resolve: {
@@ -18,7 +19,22 @@ export default ({ mode }: ConfigEnv): UserConfig => {
         '@': path.resolve(__dirname, './src'),
       },
     },
-
+    server: {
+      port: Number(VITE_BASE_PORT),
+      host: '0.0.0.0',
+      proxy: {
+        [VITE_API_URL_PREFIX]: VITE_API_URL,
+      },
+    },
+    plugins: [
+      vue(),
+      vueJsx(),
+      viteMockServe({
+        mockPath: 'mock',
+        enable: VITE_USE_MOCK === 'true',
+      }),
+      svgLoader(),
+    ],
     css: {
       preprocessorOptions: {
         less: {
@@ -30,23 +46,5 @@ export default ({ mode }: ConfigEnv): UserConfig => {
         },
       },
     },
-
-    plugins: [
-      vue(),
-      vueJsx(),
-      viteMockServe({
-        mockPath: 'mock',
-        enable: true,
-      }),
-      svgLoader(),
-    ],
-
-    server: {
-      port: 3002,
-      host: '0.0.0.0',
-      proxy: {
-        [VITE_API_URL_PREFIX]: 'http://127.0.0.1:3000/',
-      },
-    },
   };
 };