基础

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，可以看到相应的提示：

在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_ 为前缀定义变量

js 复制代码

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

2. 定义变量ts类型

修改vite-env.d.ts

js 复制代码

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

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

3. 在项目中使用变量

js 复制代码

import.meta.env.VITE_BASE_URL

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

使用 loadEnv 读取环境变量

js 复制代码

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

js 复制代码

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

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

2. 更改.env默认地址

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

修改vite.config.js

js 复制代码

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

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

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

多工程配置

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

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

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

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

1. 插件安装

安装dotenv，minimist

js 复制代码

yarn add dotenv -D 
yarn add minimist -D

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

minimist：用于解析命令行参数

2. 环境变量

新建env/.env

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

js 复制代码

VITE_GLOABL_KEY = '全局共用key'

新建env/.env.wc1

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

js 复制代码

VITE_VERSION = 'wc1'

新建env/.env.wc1.development

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

js 复制代码

VITE_BASE_URL = '//localhost:9000/wc1'

新建env/.env.wc1.production

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

js 复制代码

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

js 复制代码

/// <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的开发环境与生产环境

js 复制代码

"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

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];

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

在vite.config.ts中引入

js 复制代码

import './config/env.js';

6. 读取环境变量

js 复制代码

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,可以从打包文件中看到环境变量已被打包进去

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

js 复制代码

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

结尾

往期精彩回顾：

2种纯前端检测版本更新提示

[React 进阶] 掌握 React18 全部 Hooks

2024年React项目中使用TypeScript（最新全方位指南）

vite-配置环境变量（详细，包含多工程、多环境配置）

基础

1. 什么是环境变量

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

3. Vite默认有哪些环境

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

基本使用

1. 定义变量

2. 定义变量ts类型

3. 在项目中使用变量

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

进阶使用

1. 配置多环境

2. 更改.env默认地址

多工程配置

1. 插件安装

2. 环境变量

3. 配置ts

4. 配置启动参数

5. 配置dotenv

6. 读取环境变量

结尾