区分development和production环境
简单的区分生产和开发环境
- Vite 在一个特殊的 import.meta.env 对象上暴露环境变量,这些变量在构建时会被静态地替换掉。这里有一些在所有情况下都可以使用的内建变量:
// 通过返回值判断是生产还是开发环境
import.meta.env.MODE: {string}
// 如果在生产环境
console.log(import.meta.env.MODE)// production
// 如果在开发环境
console.log(import.meta.env.MODE)// development
console.log(import.meta.env.PROD ) // 生产环境:true,开发环境:false
console.log(import.meta.env.DEV ) // 生产环境:false,开发环境:true
在文件中配置环境变量
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载,但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载,但会被 git 忽略
- 文件要在项目的根目录创建
.env
无论生产还是开发环境都会加载.env.development
开发环境会被加载.env.production
生产环境会被加载
- 文件中以
VITE_
为前缀的变量才会暴露
示例
.env.development
文件中内容- 文件中以
VITE_
为前缀的变量才会暴露 - 代码中最好不要有空格,引号也可以省略
- 文件中以
VITE_BASE_URL=http://10.1.2.3:8000
VITE_SOME_KEY=123
- 在项目代码中读取
console.log(import.meta.env.VITE_BASE_URL) // http://10.1.2.3:8000
console.log(import.meta.env.VITE_SOME_KEY) // 123
原文地址:https://blog.csdn.net/YUELEI118/article/details/142685794
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!