基础

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，可参考：

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配置来改变

1. 修改vite.config.js

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

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

1. 使用 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. 环境变量

1. 新建env/.env

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

VITE_GLOABL_KEY = '全局共用key'

1. 新建env/.env.wc1

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

VITE_VERSION = 'wc1'

1. 新建env/.env.wc1.development

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

VITE_BASE_URL = '//localhost:9000/wc1'

1. 新建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 规则：先配置的优先级更高

1. 新建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' });

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

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

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