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

1. 修复环境变量类型丢失
2. 修改错误变量名写法
3. 调整配置顺序,将常用配置向上移动
4. 将配置项抽出到环境变量文件
5. 对环境变量进行注释描述类型补全
6. 环境变量文件解耦,防止排错成本增加
This commit is contained in:
悠静萝莉 2024-09-08 05:36:03 +08:00
parent f2d90c3a12
commit 2a9e3722b8
No known key found for this signature in database
GPG Key ID: 4EDF1CA1CEA8EBCC
6 changed files with 112 additions and 41 deletions

9
.env
View File

@ -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
# 项目标题
VITE_BASE_TITLE='TDesign Vue Next Starter'
# 项目命名空间 用于隔离不同项目的样式或配置
VITE_BASE_NAMESPACE=tdesign-starter

View File

@ -1,5 +1,12 @@
# 打包路径
# 打包路径 根据项目不同按需配置
VITE_BASE_URL=/
VITE_IS_REQUEST_PROXY = true
# 运行端口
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

View File

@ -1,5 +1,12 @@
# 打包路径 根据项目不同按需配置
VITE_BASE_URL=https://static.tdesign.tencent.com/starter/vue-next/
VITE_IS_REQUEST_PROXY = true
# 运行端口
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

View File

@ -1,5 +1,12 @@
# 打包路径 根据项目不同按需配置
VITE_BASE_URL=/
VITE_IS_REQUEST_PROXY = true
# 运行端口
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

57
src/types/env.d.ts vendored
View File

@ -1,5 +1,58 @@
export interface ImportMetaEnv {
readonly VITE_IS_REQUEST_PROXY: string;
/// <reference types="vite/client" />
// 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;
}

View File

@ -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/',
},
},
};
};