首先需要知道以下几点:
通过“import.meta.env.具体变量名”访问.env文件中的环境变量
正确方式: import.meta.env.VITE_APP_TITLE
错误方式: import.meta.env[key]
.env文件中的环境变量必须以VITE_为前缀,否则无法引用成功
正确方式: VITE_APP_TITLE = 'vite'
错误方式: TE_WORD = 123
.env开头不同的文件类型加载不同的环境变量,如:
.env 所有情况下都会加载
.env,local 所有情况下都会加载,但被git忽略
.env.[mode] 只在对应模式加载
.env.[mode].local 只在对应模式加载,但被git忽略
要在打包过程中,根据不通模式获取到不同的环境变量值,需要通过--mode选项标志来覆盖命令使用的默认模式,比如开发环境/测试环境/生产环境都对应不同的标题:
先在项目根目录下创建三个.env文件对应三个环境变量
.env.development 下:
# 开发环境配置
VITE_APP_TITLE = '开发标题'
.env.test下:
# 测试环境配置
VITE_APP_TITLE = '测试标题'
.env.staging下:
# 生产环境配置
VITE_APP_TITLE = '生产标题'
在package.json文件中scripts内传递 --mode 选项标志来覆盖命令使用的默认模式
{
"scripts": {
"dev": "vite",
"build:prod": "vite build",
"build:stage": "vite build --mode staging", //对应生产标题
"build:test": "vite build --mode test", //对应测试标题
"build:dev": "vite build --mode development", //对应开发标题
"preview": "vite preview"
},
}
使用:
const uploadFileUrl = ref(import.meta.env.VITE_APP_TITLE)