# 基础

# 1. 什么是环境变量

根据当前代码的环境变化的变量叫做环境变量。比如 VITE_BASE_URL 代表请求接口的 URL，在开发环境下为 //127.0.0.1:9000/api ，在生产环境下为 //www.test.com/api 。

# 2. Vite 有哪些自带环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。共有五种内建变量：

import.meta.env.MODE : {string} 应用运行的模式。
import.meta.env.BASE_URL : {string} 部署应用时的基本 URL。他由 base 配置项决定。
import.meta.env.PROD : {boolean} 应用是否运行在生产环境
import.meta.env.DEV : {boolean} 应用是否运行在开发环境
import.meta.env.SSR : {boolean} 应用是否运行在 server 上

Vite 中如果使用 Typescript，可以看到相应的提示：

1706710395(1).png

在 vite 项目中配置 Typescript，可参考：

Vite4.3+Typescript+Vue3+Pinia 最新搭建企业级前端项目

Vite5.0+Typescript+React18+Zustand 最新搭建企业级前端项目

# 3. Vite 默认有哪些环境

Vite 默认只有两种环境，分别是开发环境 development ，生产环境 production

# 4. 在哪里定义环境变量？

在项目根目录中分别新建：

.env ：所有环境生效

.env.local ：所有环境生效，但会被 git 忽略（适合保存敏感信息）

.env.development ：开发环境生效

.env.production ：生产环境生效

优先级：.env.development || .env.production > .env.local > .env

即如果在.env 和.env.development 中分别定义了 VITE_BASE_URL 变量，那么定义在.env.development 中的 VITE_BASE_URL 将会生效

# 基本使用

# 1. 定义变量

以 VITE_ 为前缀定义变量

	//.env
	VITE_BASE_URL = '//127.0.0.1:9000/api'

# 2. 定义变量 ts 类型

修改 vite-env.d.ts

	/// <reference types="vite/client" />
	interface ImportMetaEnv {
	readonly VITE_BASE_URL: string;
	}

	interface ImportMeta {
	readonly env: ImportMetaEnv;
	}

# 3. 在项目中使用变量

import.meta.env.VITE_BASE_URL

# 4. 在 vite.config.ts 中使用环境变量

使用 loadEnv 读取环境变量

	import { defineConfig, loadEnv } from 'vite';
	//...

	export default ({ mode }) => {
	console.log('mode', loadEnv(mode, process.cwd()).VITE_BASE_URL); //127.0.0.1:9000/api
	return defineConfig({
	//...
	});
	};

使用 yarn dev 启动命令，读取 .env , .env.local 与 .env.development 的内容

# 进阶使用

# 1. 配置多环境

vite 默认只有开发环境与生产环境，对于实际开发来说，显然是不够的，比如还需要测试环境 test。

修改 package.json

	"scripts": {
	"test":"vite --mode test", // 新增
	},

使用 yarn test 启动命令，读取 .env , .env.local 与 .env.test 的内容

# 2. 更改.env 默认地址

我们现在的.env 文件都是建立在根目录，如果.env.XX 文件太多，会显得项目根目录很乱。可以通过 envDir 配置来改变

修改 vite.config.js

	import { defineConfig } from "vite";
	export default defineConfig( {
	envDir:"env"
	});

在项目根目录下新建 env 文件夹，并将根目录下所有的.env 文件都放进去。

1706713407(1).png

使用 yarn dev 启动命令，能够正常读取 env 文件夹下 .env , .env.local 与 .env.development 的内容

# 多工程配置

如果仅仅是介绍上述内容，我就没有必要写这篇文章，接下来到本文的重点，如何多工程、多环境配置

情景：公司中存在多个类似的项目，比如普通版和完全版。如果我们需要同时维护多个仓库，那么在开发一个需求点时，我们需要手动更新多个仓库的代码。为了避免这种繁琐的操作，我们可以在同一个代码仓库中维护多个工程，但这样就需要为各个工程配置相应的环境变量。

例如，我们需要为项目 1 配置开发环境和生产环境变量，同样也需要为项目 2 配置开发环境和生产环境变量，以此类推。

先将上面更改 .env默认地址 中的配置与文件删除，防止冲突。

# 1. 插件安装

安装 dotenv，minimist

	yarn add dotenv -D
	yarn add minimist -D

dotenv：自定义环境变量目录，默认路径是项目的根目录

minimist：用于解析命令行参数

# 2. 环境变量

新建 env/.env

所有工程，所有环境的公用配置

VITE_GLOABL_KEY = '全局共用key'

新建 env/.env.wc1

项目 1 默认配置，这里用来存放版本号

VITE_VERSION = 'wc1'

新建 env/.env.wc1.development

项目 1 开发环境配置，这里用来存放接口的基础路径

VITE_BASE_URL = '//localhost:9000/wc1'

新建 env/.env.wc1.production

项目 1 生产环境配置，这里用来存放接口的基础路径

VITE_BASE_URL = '//www.test.com/wc1'

同理新建 env/.env.wc2，env/.env.wc2.development，env/.env.wc2.production 三个文件，分别对应着项目 2 默认配置，项目 2 开发环境配置，项目 2 生产环境配置

# 3. 配置 ts

修改 vite-env.d.ts

	/// <reference types="vite/client" />
	interface ImportMetaEnv {
	readonly VITE_GLOABL_KEY: string;
	readonly VITE_VERSION: string;
	readonly VITE_BASE_URL: string;
	}

	interface ImportMeta {
	readonly env: ImportMetaEnv;
	}

# 4. 配置启动参数

修改 package.json，分别对应着项目 1 与项目 2 的开发环境与生产环境

	"dev:wc1": "vite --mode development -- platform=wc1",
	"dev:wc2": "vite --mode development -- platform=wc2",
	"build:wc1": "vite build --mode production -- platform=wc1",
	"build:wc2": "vite build --mode production -- platform=wc2",

# 5. 配置 dotenv

dotenv 规则：先配置的优先级更高

新建 config/env.js

	import dotenv from 'dotenv';
	import minimist from 'minimist';

	const { _, mode } = minimist(process.argv.slice(2));

	// 从自定义启动参数中，提取出 platform
	const platform = _.filter((o) => o.includes('platform'))[0]?.split('=')[1] \|\| 'wc1';

	/* 根据打包配置设置环境变量，先设置的优先级最高 */
	/* 优先级： .env.local > .env.platform.mode > .env.platform > .env */
	dotenv.config({ path: process.cwd() + '/env/' + '.env.local' });
	dotenv.config({ path: process.cwd() + '/env/' + '.env.' + platform + '.' + mode });
	dotenv.config({ path: process.cwd() + '/env/' + '.env.' + platform });
	dotenv.config({ path: process.cwd() + '/env/' + '.env' });

在 vite.config.ts 中引入

import './config/env.js';

# 6. 读取环境变量

	console.log(import.meta.env.VITE_VERSION);
	console.log(import.meta.env.VITE_BASE_URL);
	console.log(import.meta.env.VITE_GLOABL_KEY);

运行 yarn dev:wc1 ，将会打印出 “wc1”，“//localhost:9000/wc1”，“全局共用 key”，同理运行 yarn dev:wc2 ，将会打印出.env.wc2，.env.wc2.development，.env.wc2.production 中的环境变量。

运行 yarn build:wc1 , 可以从打包文件中看到环境变量已被打包进去

1706716185(1).png

如果想本地预览，增加启动命令，修改 package.json

"preview:wc1": "vite preview --mode production -- platform=wc1" // 新增

vite ts