携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

前言

这一节说下Vtie中的环境变量。

在 vite 中使用环境变量

• Vite在全局import.meta.env对象上暴露了环境变量，我们可以获取到如下信息

console.log(import.meta.env)

• MODE - 指明现在处于的模式
• BASE_URL - 指明基础 URL
• PROD - 当前环境是否是正式环境
• dev - 当前环境是否是开发环境
• SSR - 是否是 服务端渲染 环境

生产环境替换

• 在生产环境中，这些变量会在构建时被替换掉（换成真实的值），所以我们引用这些环境变量就不能使用动态变量了，只能使用静态的字符串

import.meta.env.MODE // 有效
import.meta.env[key] // 无效

• 如果我们想在vue模板或者其他编译成HTML的地方使用此字符串，可以使用 [<wbr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr)标签，就不会被替换了

import.meta.<wbr>env.MODE

env 环境文件

• 我们可以给vite添加自定义环境变量，需要添加VITE_前缀
• 在根目录下创建.env文件,添加如下代码

VITE_TITLE=Hello

• 在项目中使用

console.log(import.meta.env.VITE_TITLE)

• 我们可以在项目中添加不同的.env.xxx.xxx的文件，来区分不同环境下要使用的环境变量

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

• 例如：
  • .env.development .env.production 可以区分开发环境和生产环境
  • .env.development .env.development.local 同一环境可以区分为不同的机器来区分环境

不同的 mode

• 有的时候我们想在开发环境看生产、测试环境的情况，我们通过 mode 参数来区分环境
• 创建 .evn.test

VITE_DEMO=test

• package.json 添加脚本命令

"scripts": {
  "dev": "vite",
  "test": "vite --mode test",
}

执行 npm run test 就会执行 test 环境

vite 识别自定义环境变量

• 我们添加的自定义环境变量，在不处理的情况下是无法获得智能提示的。
• src目录下创env.d.ts，添加如下代码

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string // 自定义环境变量
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

在使用 import.meta.env 时就可以获得对应的代码提示