Ionic 3环境参数：如何通过CLI命令在代码中区分生产/开发环境？

在Ionic 3里区分不同环境其实有几种实用的方式，咱们一步步拆解清楚：

1. 关于process.env.IONIC_ENV的可用性 #

答案是可以用，但有前提。当你执行ionic build android --prod --device这类命令时，--prod参数会自动把IONIC_ENV环境变量设为production；默认的开发构建（不带--prod）则会设为development。不过要注意：这个变量只在Webpack编译阶段有效，直接在运行时代码里访问会报错——因为移动端（Android/iOS）运行时没有Node.js的process对象，必须提前通过构建工具把它注入成静态常量。

2. 具体实现方法 #

方式一：用环境文件管理（最推荐） #

这是Ionic官方推荐的方式，清晰且易维护：

• 在项目src目录下新建environments文件夹，创建两个文件：

  // src/environments/environment.ts（开发环境）
  export const environment = {
    production: false,
    apiBaseUrl: 'https://dev-api.yourdomain.com',
    debugMode: true
  };
  

  // src/environments/environment.prod.ts（生产环境）
  export const environment = {
    production: true,
    apiBaseUrl: 'https://api.yourdomain.com',
    debugMode: false
  };
  

• 修改src/tsconfig.json，添加路径映射方便导入：

  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@env": ["environments/environment"]
    }
  }
  

• Ionic 3的构建系统会自动根据--prod参数切换环境文件，之后在代码里直接导入使用：

  import { environment } from '@env';
  
  if (environment.production) {
    console.log('当前是生产环境，关闭调试日志');
  } else {
    console.log('当前是开发环境，开启调试模式');
  }
  

方式二：直接注入process.env.IONIC_ENV #

如果你想直接用这个变量，需要通过Webpack把它注入到全局：

• 找到项目的Webpack配置文件（通常是webpack.config.js或关联的配置），添加DefinePlugin：

  const webpack = require('webpack');
  
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.IONIC_ENV': JSON.stringify(process.env.IONIC_ENV)
      })
    ]
  };
  

• 之后在代码里就能直接判断：

  if (process.env.IONIC_ENV === 'production') {
    // 生产环境专属逻辑，比如禁用错误追踪弹窗
  } else {
    // 开发环境逻辑，比如开启控制台日志
  }
  

方式三：自定义命令行环境参数 #

除了默认的IONIC_ENV，你还可以自定义环境标识，比如测试环境：

• 执行构建命令时添加自定义参数：ionic build android --prod --device --env=staging
• 在Webpack配置中读取这个参数并注入：

  const currentEnv = process.env.IONIC_ENV || process.env.npm_config_env || 'development';
  
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.CUSTOM_ENV': JSON.stringify(currentEnv)
      })
    ]
  };
  

3. 关键注意事项 #

• 绝对不要在移动端运行时直接访问process.env，必须通过Webpack注入成静态常量，否则会出现process is not defined的错误。
• ionic serve默认是开发环境，ionic build --prod是生产环境，ionic build不带--prod同样是开发环境。

内容的提问来源于stack exchange，提问作者Michael W. Czechowski