From 2a9e3722b82af2cc8323ea673b1534629c9167a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= Date: Sun, 8 Sep 2024 05:36:03 +0800 Subject: [PATCH] =?UTF-8?q?feat(Vite=20Config):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 修复环境变量类型丢失 2. 修改错误变量名写法 3. 调整配置顺序，将常用配置向上移动 4. 将配置项抽出到环境变量文件 5. 对环境变量进行注释描述类型补全 6. 环境变量文件解耦，防止排错成本增加 --- .env | 9 ++++---- .env.development | 17 ++++++++++---- .env.site | 15 ++++++++---- .env.test | 15 ++++++++---- src/types/env.d.ts | 57 ++++++++++++++++++++++++++++++++++++++++++++-- vite.config.ts | 40 ++++++++++++++++---------------- 6 files changed, 112 insertions(+), 41 deletions(-) diff --git a/.env b/.env index 2dd71fd..91c81f0 100644 --- a/.env +++ b/.env @@ -1,5 +1,4 @@ -# 打包路径 根据项目不同按需配置 -VITE_BASE_URL = / -VITE_IS_REQUEST_PROXY = true -VITE_API_URL = https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com -VITE_API_URL_PREFIX = /api \ No newline at end of file +# 项目标题 +VITE_BASE_TITLE='TDesign Vue Next Starter' +# 项目命名空间 用于隔离不同项目的样式或配置 +VITE_BASE_NAMESPACE=tdesign-starter diff --git a/.env.development b/.env.development index d475e5c..bc02772 100644 --- a/.env.development +++ b/.env.development @@ -1,5 +1,12 @@ -# 打包路径 -VITE_BASE_URL = / -VITE_IS_REQUEST_PROXY = true -VITE_API_URL = https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com -VITE_API_URL_PREFIX = /api \ No newline at end of file +# 打包路径 根据项目不同按需配置 +VITE_BASE_URL=/ +# 运行端口 +VITE_BASE_PORT=3002 +# 是否使用请求库代理 如果启用会跳过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 diff --git a/.env.site b/.env.site index 7e1e855..d72df75 100644 --- a/.env.site +++ b/.env.site @@ -1,5 +1,12 @@ # 打包路径 根据项目不同按需配置 -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 \ No newline at end of file +VITE_BASE_URL=https://static.tdesign.tencent.com/starter/vue-next/ +# 运行端口 +VITE_BASE_PORT=3002 +# 是否使用请求库代理 如果启用会跳过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 diff --git a/.env.test b/.env.test index d278ac2..bc02772 100644 --- a/.env.test +++ b/.env.test @@ -1,5 +1,12 @@ # 打包路径 根据项目不同按需配置 -VITE_BASE_URL = / -VITE_IS_REQUEST_PROXY = true -VITE_API_URL = https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com -VITE_API_URL_PREFIX = /api \ No newline at end of file +VITE_BASE_URL=/ +# 运行端口 +VITE_BASE_PORT=3002 +# 是否使用请求库代理 如果启用会跳过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 diff --git a/src/types/env.d.ts b/src/types/env.d.ts index 6ca1ddb..2953224 100644 --- a/src/types/env.d.ts +++ b/src/types/env.d.ts @@ -1,5 +1,58 @@ -export interface ImportMetaEnv { - 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; +} diff --git a/vite.config.ts b/vite.config.ts index 30737de..f80a97b 100644 --- a/vite.config.ts +++ b/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 = + 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/', - }, - }, }; };