./tsconfig.json

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

./package.json

{
  "config": {
    "ionic_source_map_type": "source-map","ionic_webpack": "./config/webpack.config.js"
  },...
}

./config/webpack.config.js(取决于package.json中的ionic_webpack)

/*
 * The webpack config exports an object that has a valid webpack configuration
 * For each environment name. By default,there are two Ionic environments:
 * "dev" and "prod". As such,the webpack.config.js exports a dictionary object
 * with "keys" for "dev" and "prod",where the value is a valid webpack configuration
 * For details on configuring webpack,see their documentation here
 * https://webpack.js.org/configuration/
 */
 
const path = require('path');
// If you start your building process with the flag --prod this will equal "prod" otherwise "dev"
const ENV = process.env.IONIC_ENV;
 
const devConfig = {
  entry: ...,output: {...},devtool: ...,resolve: {
    extensions: [...],modules: [...],alias: {
      // this distincts your specific environment "dev" and "prod"
      "@env": path.resolve(`./src/env/env.ts`),}
  },module: {...},plugins: [...],node: {...}
};
 
const prodConfig = {
  entry: ...,alias: {
      // this distincts your specific environment "dev" and "prod"
      "@env": path.resolve(`./src/env/env.prod.ts`),node: {...}
};
 
module.exports = {
  dev: devConfig,prod: prodConfig
}

说明

魔法来自devConfig.resolve.alias和prodConfig.resolve.alias.这行代码创建了一个可导入的别名,如您自己的模块或节点模块.现在可以通过导入{ENV}从’@env’注入任何模块,组件,服务,管道或任何你喜欢的东西.

注意

不要忘记创建特定于环境的文件.在这个例子中,你需要一个像这样的文件结构：

./
|   package.json
│   tsconfig.json    
│
└── config
│       webpack.config.js
│   
└── src
    │
    └── env
            env.ts        (dev environment variables)
            env.prod.ts   (prod environment variables)

示例文件

./src/env/env.ts(默认情况下是开发)

export const ENV = {
  production: false,isDebugMode: true
};

./src/env/env.prod.ts

export const ENV = {
  production: true,isDebugMode: false
};