区分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