在大型 Vue 项目中，如何通过 Vue CLI/Vite 进行多环境配置管理，例如开发、测试、生产环境的不同 API 地址？

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊大型 Vue 项目中的多环境配置管理，这可是个绕不开的话题。想象一下，你精心编写的代码，在开发环境跑得飞起，一上线就崩得稀里哗啦，这可咋整？原因往往就是环境配置没搞好。所以，今天就来帮大家伙儿捋顺捋顺，用 Vue CLI 和 Vite 这两把利器，把多环境配置玩得明明白白。

第一幕：配置文件的那些事儿

首先，咱们得先有个思想准备：配置文件的数量会随着环境的增多而增多。这是不可避免的，但也正是我们灵活性的来源。

1. Vue CLI 的姿势

Vue CLI 默认提供了 .env 文件来管理环境变量。我们可以创建以下文件：

.env.development：开发环境配置文件
.env.test：测试环境配置文件
.env.production：生产环境配置文件
.env：默认配置文件（优先级最低，一般用于存放通用配置）

在这些文件中，我们可以定义一些环境变量，比如 API 地址：

# .env.development
NODE_ENV = development
VUE_APP_API_BASE_URL = "http://localhost:8080/api"
VUE_APP_DEBUG = true

# .env.production
NODE_ENV = production
VUE_APP_API_BASE_URL = "https://api.example.com"
VUE_APP_DEBUG = false

注意点：
- 环境变量必须以 VUE_APP_ 开头，这样 Vue CLI 才能识别并将其注入到 process.env 中。
- NODE_ENV 用于指定当前环境，Vue CLI 会根据这个值来加载不同的配置文件。
- 如果多个配置文件中定义了相同的变量，优先级高的文件会覆盖优先级低的文件（优先级：特定环境 > 通用环境）。

2. Vite 的玩法

Vite 的环境变量配置方式略有不同，它使用 import.meta.env 来访问环境变量。 Vite 使用 .env 文件，并使用 dotenv 来加载它们。

# .env.development
NODE_ENV = development
VITE_API_BASE_URL = "http://localhost:8080/api"
VITE_DEBUG = true

# .env.production
NODE_ENV = production
VITE_API_BASE_URL = "https://api.example.com"
VITE_DEBUG = false

注意点：
- 默认情况下，Vite 只能访问以 VITE_ 开头的环境变量。
- 如果你想访问其他环境变量，需要在 vite.config.js 中显式地配置 define 选项。
- NODE_ENV 的作用与 Vue CLI 类似，用于指定当前环境。

3. 访问环境变量

有了配置文件，接下来就是在代码中访问这些变量了。

Vue CLI:

// 在 Vue 组件中
console.log(process.env.VUE_APP_API_BASE_URL);
console.log(process.env.VUE_APP_DEBUG);

Vite:

// 在 Vue 组件中
console.log(import.meta.env.VITE_API_BASE_URL);
console.log(import.meta.env.VITE_DEBUG);

第二幕：命令行参数的妙用

除了配置文件，我们还可以通过命令行参数来动态地指定环境变量。这在 CI/CD 场景下非常有用。

1. Vue CLI 的姿势

Vue CLI 允许我们通过 --mode 参数来指定环境模式。例如：

vue-cli-service build --mode test

这条命令会加载 .env.test 和 .env 文件，并将环境变量注入到 process.env 中。

我们还可以在 package.json 中定义一些快捷命令：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode development",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build --mode production"
  }
}

这样，我们就可以通过 npm run build:test 来构建测试环境的代码了。

2. Vite 的玩法

Vite 也支持通过 --mode 参数来指定环境模式。例如：

vite build --mode test

与 Vue CLI 类似，这条命令会加载 .env.test 和 .env 文件，并将环境变量注入到 import.meta.env 中。

同样，我们也可以在 package.json 中定义一些快捷命令：

{
  "scripts": {
    "dev": "vite",
    "build:dev": "vite build --mode development",
    "build:test": "vite build --mode test",
    "build:prod": "vite build --mode production"
  }
}

第三幕：高级技巧，更上一层楼

掌握了基本用法，咱们再来聊聊一些高级技巧，让你的多环境配置更加灵活强大。

1. 动态导入配置

有时候，我们可能需要根据环境动态地加载不同的配置文件。比如，某些配置文件可能包含敏感信息，我们不希望将其提交到代码仓库中。

Vue CLI:

我们可以创建一个 config 目录，并在其中存放不同环境的配置文件，例如：

config/
├── development.js
├── test.js
└── production.js

然后在代码中，我们可以根据 process.env.NODE_ENV 来动态地导入这些文件：

// config.js
const env = process.env.NODE_ENV || 'development';
const config = require(`./${env}.js`);

export default config;

// 在 Vue 组件中
import config from './config';
console.log(config.apiBaseUrl);

Vite:

Vite 提供了 import.meta.glob 来批量导入文件。我们可以利用这个特性来实现动态导入配置。

// config.js
const env = import.meta.env.MODE || 'development'; // MODE is set by vite
const configFiles = import.meta.globEager('./config/*.js');

const config = configFiles[`./config/${env}.js`] || configFiles['./config/development.js']; // default to development

export default config;

// 在 Vue 组件中
import config from './config';
console.log(config.apiBaseUrl);

注意：为了保证代码正常运行，你需要保证每个环境都有对应的配置文件，并且至少有一个默认的配置文件（比如 development.js）。

2. 类型安全

在使用 TypeScript 的项目中，我们希望对环境变量进行类型检查，避免出现拼写错误或者类型不匹配的情况。

Vue CLI:

我们可以创建一个 env.d.ts 文件，来定义环境变量的类型：

// env.d.ts
declare global {
  interface ProcessEnv {
    NODE_ENV: 'development' | 'production' | 'test';
    VUE_APP_API_BASE_URL: string;
    VUE_APP_DEBUG: 'true' | 'false';
  }
  interface Process {
    env: ProcessEnv;
  }
}
export {};

Vite:

Vite 提供了 ViteEnv 类型来定义环境变量的类型。我们可以通过扩展这个类型来实现类型检查。

// vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string;
  readonly VITE_DEBUG: string;
  readonly MODE: string;
  readonly BASE_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

注意：
- 在使用 TypeScript 时，需要在 tsconfig.json 中配置 compilerOptions.types，将 env.d.ts 或者 vite-env.d.ts 添加到类型列表中。
- 环境变量的值在运行时才能确定，因此在类型定义中，我们只能使用字符串类型。

3. 使用 cross-env 跨平台设置环境变量

在不同的操作系统中，设置环境变量的方式可能不同。为了保证代码的跨平台兼容性，我们可以使用 cross-env 这个工具。

首先，安装 cross-env：

npm install --save-dev cross-env

然后，在 package.json 中使用 cross-env 来设置环境变量：

{
  "scripts": {
    "build:test": "cross-env NODE_ENV=test vue-cli-service build"
  }
}

这样，无论在 Windows、macOS 还是 Linux 系统上，都可以正确地设置 NODE_ENV 环境变量。

第四幕：最佳实践，避免踩坑

最后，咱们来总结一些最佳实践，帮助大家伙儿避免踩坑。

明确区分环境：
- 使用清晰的环境名称，比如 development、test、production。
- 在不同的环境中，使用不同的 API 地址、日志级别等配置。
统一管理配置：
- 将所有环境配置集中管理，方便维护和修改。
- 避免在代码中硬编码配置信息。
保护敏感信息：
- 不要将敏感信息（比如 API 密钥、数据库密码）提交到代码仓库中。
- 可以使用环境变量或者动态加载配置的方式来保护敏感信息。
进行类型检查：
- 在使用 TypeScript 的项目中，对环境变量进行类型检查，避免出现拼写错误或者类型不匹配的情况。
使用工具提升效率：
- 可以使用 cross-env 来跨平台设置环境变量。
- 可以使用 dotenv 来加载 .env 文件。

环境配置对比表格

特性	Vue CLI	Vite
配置文件	`.env` 系列文件 ( `.env`, `.env.dev`, 等)	`.env` 系列文件 ( `.env`, `.env.dev`, 等)
环境变量前缀	`VUE_APP_`	`VITE_`
访问环境变量	`process.env.VUE_APP_XXX`	`import.meta.env.VITE_XXX`
命令行参数	`--mode`	`--mode`
动态导入配置	可以，手动实现	可以，利用 `import.meta.glob`
类型安全	需要自定义类型定义文件 (`.d.ts`)	需要自定义类型定义文件 (`vite-env.d.ts`)
默认支持 TypeScript	支持，但需配置	支持，无需额外配置

案例分析

假设我们有一个电商项目，需要配置以下环境：

development：本地开发环境，API 地址为 http://localhost:8080/api，开启调试模式。
test：测试环境，API 地址为 https://test.example.com/api，关闭调试模式。
production：生产环境，API 地址为 https://api.example.com/api，关闭调试模式。

Vue CLI 配置：

# .env.development
NODE_ENV = development
VUE_APP_API_BASE_URL = "http://localhost:8080/api"
VUE_APP_DEBUG = true

# .env.test
NODE_ENV = test
VUE_APP_API_BASE_URL = "https://test.example.com/api"
VUE_APP_DEBUG = false

# .env.production
NODE_ENV = production
VUE_APP_API_BASE_URL = "https://api.example.com/api"
VUE_APP_DEBUG = false

Vite 配置：

# .env.development
NODE_ENV = development
VITE_API_BASE_URL = "http://localhost:8080/api"
VITE_DEBUG = true

# .env.test
NODE_ENV = test
VITE_API_BASE_URL = "https://test.example.com/api"
VITE_DEBUG = false

# .env.production
NODE_ENV = production
VITE_API_BASE_URL = "https://api.example.com/api"
VITE_DEBUG = false

然后，在代码中，我们可以这样访问 API 地址：

Vue CLI:

const apiBaseUrl = process.env.VUE_APP_API_BASE_URL;

Vite:

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;

好了，今天就讲到这里。希望大家通过今天的学习，能够掌握大型 Vue 项目中的多环境配置管理技巧，让你的代码在任何环境下都能稳如泰山。记住，环境配置是项目成功的基石，一定要重视起来！下次有机会再跟大家分享其他的技术干货。祝大家编码愉快，Bug 远离！

发表回复 取消回复

发表回复取消回复