env环境变量
vite在import.meta.env 对象上暴露环境变量。固定的环境变量有
-
import.meta.env.MODE: string类型，应用运行的模式，通过vite --model dev或者vite build --model prod指定 -
import.meta.env.BASE_URL: string类型，由base配置项决定 -
import.meta.env.PROD: boolean，应用是否运行在生成环境 -
import.meta.env.DEV: boolean，应用是否运行在开发环境
.env 文件
vite从下列文件加载额外的环境变量
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略
加载的环境变量通过import.meta.env暴露给客户端源码
.env 文件目录
通过envDir配置项配置，如果不配置，默认是跟vite.config文件所在同目录
{
plugins: [vue() ],
envDir: './env',
...
};
env前缀
为了防止意外地将一些环境变量泄露到客户端，只要以VITE_为前缀的变量才会暴露给经过vite处理的代码，例如
APP=demo
VITE_KEY=123
只有VITE_KEY会被暴露为 import.meta.env.VITE_KEY提供给客户端源码，而APP不会。
当然也可以自定义env变量的前缀，使用envPrefix配置项
{
plugins: [vue() ],
envDir: './env',
envPrefix: ['VITE_','DZ_'],
build:{
manifest: true
}
};
添加配置项后，一下配置内容
APP=demo
VITE_KEY=123
DZ_API=http://www.baidu.com
VITE_KEY和DZ_API都会通过import.meta.env暴露
vite.config中使用env
根据不同的mode，生成文件到不同目录。通过loadEnv加载环境变量
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({mode})=>{
const envConfig = loadEnv(mode,'./env')
const result = {
plugins: [vue() ],
envDir: './env',
envPrefix: ['VITE_','DZ_'],
build:{
manifest: true,
outDir: `./dist/${mode}`
}
};
return result;
})
TypeScript 智能提示
在src目录下的env.d.ts文件，添加如下内容
interface ImportMetaEnv {
readonly VITE_KEY: string;
readonly DZ_API: string;
// 更多环境变量...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
使用
import.meta.env.VITE_KEY
