一、获取默认环境变量
vite 默认的 5 个内置环境变量无法在 .env.development 等配置文件中更改,可以通过运行时配置更改
console.log(import.meta.env);
// {
// BASE_URL: '/',
// DEV: true,
// MODE: 'development',
// PROD: false,
// SSR: false
// }
二、自定义环境变量
- 环境变量可在任意组件中使用,也可在 vite.config.js 中使用
- 定义的环境变量的前缀必须是
VITE_
,否则环境变量不生效,此前缀可配置- 如果在所有配置文件名后拼接 .local,那么此配置文件会被 git 忽略,只在本地生效(比如:新建 .env.local 配置文件)
1. 定义开发环境变量
在项目根目录新建 .env.development 配置文件
VITE_HTTP = http://localhost:9000/
VITE_WHO = "I am development"
2. 定义生产环境变量
在项目根目录新建 .env.production 配置文件
VITE_HTTP = http://localhost:8000/
VITE_WHO = "I am production"
3. 定义 sit 环境变量(非内置,需要在package.json中配置)
- 在项目根目录新建 .env.sit 配置文件
VITE_HTTP = http://localhost:7000/
VITE_WHO = "I am sit"
- 在项目的 package.json 的 scripts 属性中新增 dev:sit
通过 npm run dev:sit 启动服务查看环境变量
"scripts": {
"dev:sit": "vite --mode sit",
},
4. 定义通用环境变量
在项目根目录新建 .env 配置文件,在所有环境生效,优先级最低
VITE_PUBLIC_TOKEN = "111222333444555666777"
5. 定义通用环境变量,会被 git 忽略
在项目根目录新建 .env.local 配置文件
VITE_PUBLIC_KEY = "aaabbbcccdddeee"
网友评论