咨询Ionic2+/Ionic3环境变量配置的正确实现方式

嘿，我刚好折腾过Ionic 2和3的环境变量配置，给你分享几个实用的方法，亲测有效：

这是最贴合Ionic/Angular生态的做法，能轻松区分开发、生产、测试等不同环境：

• 第一步，在项目根目录的src文件夹下新建environments目录，然后创建几个环境配置文件：
  • environment.ts：默认的开发环境配置
  • environment.prod.ts：生产环境配置
  • 要是有测试环境需求，还可以加environment.staging.ts
• 每个文件里定义你的配置项，比如开发环境的environment.ts：

export const environment = {
  production: false,
  apiUrl: 'http://dev.your-api.com',
  apiKey: 'dev-xxxxxx'
};

生产环境的environment.prod.ts就换成生产环境的参数：

export const environment = {
  production: true,
  apiUrl: 'https://prod.your-api.com',
  apiKey: 'prod-xxxxxx'
};

• 为了引用方便，在tsconfig.json里配置路径别名：找到compilerOptions下的paths，添加：

"paths": {
  "@environment/*": ["src/environments/*"]
}

• 在代码里引用的时候就很简洁了：

import { environment } from '@environment/environment';

// 直接用配置项
console.log('当前API地址:', environment.apiUrl);

• 构建不同环境的时候，用对应的命令：
  • 开发环境直接跑ionic serve，会自动加载environment.ts
  • 生产环境用ionic build --prod，自动切换到environment.prod.ts
  • 如果要自定义测试环境，得修改angular-cli.json里的environments配置，添加测试环境的映射：

"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts",
  "staging": "environments/environment.staging.ts"
}

然后运行ionic build --env=staging就能打包测试环境的代码了。

如果习惯用.env文件统一管理配置，这个方法也很顺手：

• 先安装依赖包：

npm install dotenv --save
npm install @types/dotenv --save-dev

• 在项目根目录创建.env文件，一定要把这个文件加入.gitignore，别把敏感信息提交到仓库：

API_URL=http://dev.your-api.com
API_KEY=dev-xxxxxx

• 在src/main.ts的最顶部导入并加载配置：

import * as dotenv from 'dotenv';
dotenv.config();

• 之后在代码里就能通过process.env访问这些变量了：

const apiUrl = process.env.API_URL;
const apiKey = process.env.API_KEY;

• 生产环境可以单独创建.env.prod文件，然后在package.json里加个构建脚本：

"scripts": {
  "build:prod": "dotenv -e .env.prod ionic build --prod"
}

运行npm run build:prod就能加载生产环境的配置打包了。

• 不管用哪种方法，像API密钥这类敏感信息，绝对不能提交到Git仓库，一定要把对应的配置文件（比如.env、非默认的环境配置文件）加到.gitignore里
• 用环境配置文件方法时，要确认构建命令和目标环境对应，别不小心把开发环境的配置打到生产包了
• 用dotenv的话，Ionic打包时会把process.env的值直接硬编码到代码里，不用担心运行时找不到变量

内容的提问来源于stack exchange，提问作者Samuel Dauzon