环境变量是我们前端工程中很常见的一个配置,例如我们想在
development(开发)模式
或者production(生产)模式
下,根据不同的环境变量的配置,运行不同的代码、不同环境产生不同的代码逻辑。这时候,就需要我们的环境变量上场了。
内置环境变量
在Vite中,可以通过import.meta.env
对象,获取环境变量的值。这里有一些在所有情况下都可以使用的内建变量。
我们现在打印下import.meta.env
对象
import.meta.env
对象有下面5个属性值:
-
MODE
: {string} 应用运行的模式 -
BASE_URL
: {string} 部署应用时的基本 URL。他由base
配置项决定。 -
PROD
: {boolean} 应用是否运行在生产环境。 -
DEV
: {boolean} 应用是否运行在开发环境。 -
SSR
: {boolean} 应用是否运行在 server 上。
上面我们打印出MODE = "development",说明我们现在是在开发环境。
现在我们在执行下npm run build
打包下看下
//打印import.meta.env
console.log(import.meta.env)
可以看到,打包完成的js文件里,我们可以发现,此时的MODE变成了production(生产)模式,并且在打包完成后的js文件里import.meta.env
会被替换成了他真正的值{BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}
,这就是生产环境值的替换。
自定义环境变量
例如,我们现在在项目的根目录下,新建一个.env
文件。
加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。
为了防止意外地将一些环境变量泄漏到客户端,Vite规定:只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量:
-
.env
内容
VITE_MY_KEY= 123
此时,我们再打印下import.meta.env
对象,就会出现VITE_MY_KEY变量
- TypeScript 的智能提示
这里需要注意的一点是,vite内置的环境变量属性是有代码智能提示补全的,如果你想要自己自定义的环境变量也有智能提示补全,你可以在 src 目录下创建一个 env.d.ts 文件,接着按下面这样增加 ImportMetaEnv 的定义:
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_MY_KEY: string
// 更多环境变量...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
在真正项目的开发中,我们并不会直接去用.env
文件,而是会新建.env.development
文件和.env.production
文件:
-
.env.development
文件:开发环境下会读取文件里面定义的数据 -
.env.production
文件:生产环境下会读取文件里面定义的数据
# .env.development
VITE_TITLE=开发环境的标题
# .env.production
VITE_TITLE=生产环境的标题
然后我们可以使用 import.meta.env.VITE_TITLE,在不同的环境下渲染不同的值
模式
我们现在在项目的根目录下,新建一个.env.test
文件,内容如下:
# .env.test
VITE_TITLE=test
在package.json
里 新增配置
然后我们在
npm run dev
的时候给他指定运行模式是test,最后运行得到下面的结果
同理,如果我们给 npm run build
的时候增加 mode
,也是会改变 VITE_TITLE
的值的。
总结
不同的方式,配置不同的环境变量,这样我们可以非常灵活的通过不同的.env
文件,在(不)相同的环境下或者服务器下,得到不同的结果。这个对于比较复杂的集成项目来说,是非常有用的。