介绍

它的主要作用就是让开发者区分不同的运行环境，来实现 兼容开发和生产

例如 npm run dev 就是开发环境  npm run build 就是生产环境等等

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量

{
	"BASE_URL": "/",       // 部署时的URL前缀
	"MODE": "development", // 运行模式
	"DEV": true,"          // 是否在dev环境
		"PROD": false,       // 是否是build 环境
	"SSR": false           // 是否是SSR 服务端渲染模式
}

需要注意的一点就是这个环境变量不能使用动态赋值 import.meta.env[key] 应为这些环境变量在打包的时候是会被硬编码的通过JSON.stringify 注入浏览器的

配置额外的环境变量

在根目录新建 env 文件 可以创建多个

如下  env.[name]

修改启动命令

在 package json 配置 --mode env 文件名称

配置智能提示

interface ImportMetaEnv {
    VITE_XIAOMAN: string
}

然后 App.vue 输出 JSON.stringify(import.meta.env)

就已经添加进去了

生产环境使用