📰 多环境配置

NodeJS 的版本为 14.2.2，假设有三个环境 devlopment（开发环境）、staging（测试环境） 以及 production（线上环境），每个环境对应不同的 API 接口地址以及有不同的配置，需要打包到不同的服务器上部署。

环境变量文件

在项目根目录下新建各环境配置文件，命名规则为 .env.环境名.

• .env.development

# .env.development

APP_ENV=development

# API 主机地址
NEXT_PUBLIC_API_BASE_URL=//192.168.1.13

• .env.staging

# .env.staging

APP_ENV=staging

# API 主机地址
NEXT_PUBLIC_API_BASE_URL=//192.168.16

• .env.production

# .env.production

APP_ENV=production

# API 主机地址
NEXT_PUBLIC_API_BASE_URL=//poccur.com

TypeScript 支持

如果项目使用了 TypeScript，通过如下设置，能过在输入 process.env. 时提示你预设的环境变量。

项目根目录下新建 env.d.ts 文件（名称、位置随意，在 tsconfig.json 文件中对应上即可）。

// env.d.ts

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: "development" | "production" | "test";
    readonly APP_ENV: "development" | "staging" | "production";

    // api 地址
    readonly NEXT_PUBLIC_API_BASE_URL: string;
  }
}

在 tsconfig.json 的 include 字段中添加声明文件：

// tsconfig.json

{
  // ...其他配置
  "include": [
    "env.d.ts"
    // ... 其他声明文件
  ]
}

⚠️ 注意：如果未生效，重启一下编辑器的 TS 服务。

修改命令

修改 package.json 中的启动/打包命令，通过 dotenv-cli 插件为程序指定需要加载的环境变量配置文件。

1. 安装 dotenv-cli 插件

pnpm add -D dotenv-cli

2. 修改相关命令

// package.json

{
  // ...其他配置
  "scripts": {
    "dev": "next dev",
    "dev:staging": "dotenv -e .env.staging next dev",
    "dev:prod": "dotenv -e .env.production next dev",
    "build": "dotenv -e .env.development next build",
    "build:staging": "dotenv -e .env.staging next build",
    "build:prod": "dotenv -e .env.production next build",
    "start": "next start",
    "lint": "next lint"
  }
  // ...其他配置
}

注意格式为 dotenv -e .env.环境名 ...。

在代码中使用环境变量

通过 process.env. 读取环境变量，如：

// 接口地址
export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;

// 资源地址
export const RESOURCE_BASE_URL = API_BASE_URL + "/public";