环境变量是我们前端工程中很常见的一个配置，例如我们想在
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 文件，在（不）相同的环境下或者服务器下，得到不同的结果。这个对于比较复杂的集成项目来说，是非常有用的。
网友评论