vite的环境变量 import.meta.env¶

官网文档¶

官网：https://cn.vitejs.dev/guide/env-and-mode#env-variables

环境变量其实有两种原型环境：浏览器、node。

在浏览器环境里使用环境变量¶

在.js、.ts、.vue里面使用环境变量，其实是在浏览器里运行，我们可以直接用 console.log 打印出来看看结构：

console.log('import', import.meta)
console.log('import.url', import.meta.env.BASE_URL)
console.log('import.env.MODE', import.meta.env.MODE)

但是有个小问题，如果只使用console.log('import', import.meta)的话，那么看不到内部结构。

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

import.meta.env.MODE: {string} 应用运行的模式。

import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。

import.meta.env.PROD: {boolean} 应用是否运行在生产环境（使用 NODE_ENV='production' 运行开发服务器或构建应用时使用 NODE_ENV='production' ）。

import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

在node环境里使用环境变量¶

当我们在 vite.config 里面想打印一下看看结构的话，就会发现，看不到。

那么要如何正确使用呢？需要用的 loadEnv 才可以拿到环境变量。

import { defineConfig, loadEnv } from 'vite'

export default (opt: any) => {

  const { mode } = opt
  const url = loadEnv(mode, process.cwd()).VITE_BASEURL
  switch (url) {
    case 'lib': // 打包库文件，生成es + umd 格式
      return lib()
      break;

    default: // 开发模式、生产模式
      return project(url)
      break;
  }
}

.env 文件 -- 设置环境变量¶

Vite 使用 dotenv 从你的环境目录中的下列文件加载额外的环境变量：

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

然后在package 里面设置mode

"scripts": { "dev": "vite", "build": "vite build --mode project", "lib": "vite build --mode lib", "libdts": "vue-tsc --declaration --emitDeclarationOnly ", }, build 命令后面的 --mode project 表示，需要使用 project 模式打包项目，对应的是 .env.project 文件。

lib 命令后面的 --mode lib 表示，需要使用 lib模式打包项目，对应的是 .env.lib 文件。

这样我们可以根据不同的命令，使用不同的模式，加载对应的.env文件，得到具体的环境变量。

环境加载优先级¶

一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。

另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。

.env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效。

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

js
console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

模式¶

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。

这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量：

# .env.production
VITE_APP_TITLE=My App

在你的应用中，你可以使用 import.meta.env.VITE_APP_TITLE 渲染标题。

在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想在 staging （预发布）模式下构建应用：

bash
vite build --mode staging

还需要新建一个 .env.staging 文件：

# .env.staging
VITE_APP_TITLE=My App (staging)

由于 vite build 默认运行生产模式构建，你也可以通过使用不同的模式和对应的 .env 文件配置来改变它，用以运行开发模式的构建：

# .env.testing
NODE_ENV=development

NODE_ENV and Modes¶

It's important to note that NODE_ENV (process.env.NODE_ENV) and modes are two different concepts. Here's how different commands affect the NODE_ENV and mode:

Command	NODE_ENV	Mode
vite build	"production"	"production"
vite build --mode development	"production"	"development"
NODE_ENV=development vite build	"development"	"production"
NODE_ENV=development vite build --mode development	"development"	"development"

The different values of NODE_ENV and mode also reflect on its corresponding import.meta.env properties:

Command	import.meta.env.PROD	import.meta.env.DEV
NODE_ENV=production	true	false
NODE_ENV=development	false	true
NODE_ENV=other	false	true

Command	import.meta.env.MODE
--mode production	"production"
--mode development	"development"
--mode staging	"staging"