Question

我正在尝试找到一个很好的解决方案，可以在运行时基于标志动态地将环境变量注入Ionic2应用程序。对于我的用例，我需要支持的不仅仅是默认的dev / prod选项。（例如dev / test / qa / prod）。

我主要是通过一些调整来实现以下方法：https://github.com/gshigeto/ionic-environment-variables

我设置的环境标志是APP_ENV，就在离子命令之前，如下所示：

APP_ENV=dev ionic serve

在构建时，我使用自定义webpack.config文件将env.ts文件替换为目标环境的.ts文件。看起来像这样：

./ config / Webpack.config

var path = require('path');
var defaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

var env = process.env.APP_ENV;

if (!defaultConfig[env]) {  
    defaultConfig[env] = defaultConfig["dev"];
}

defaultConfig[env].resolve.alias = {
    "@app/env": path.resolve('./src/env/env.' + env + '.ts')
};

module.exports = function () {
  return defaultConfig;
};

我在这里告诉离子关于我的自定义webpack配置：

./的package.json

  "config": {
    "ionic_webpack": "./config/webpack.config.js"
  },

此外，我更新了我的tsconfig.json，让我的编译器知道如何解析别名：

./ tsconfig.json

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

然后我定义环境变量文件，如下所示：

./ SRC / ENV / env.dev.ts

export const ENV = {
    API_URL: "http://dev-url.com/"
}

./ SRC / ENV / env.test.ts

export const ENV = {
    API_URL: "http://test-url.com/"
}

./ SRC / ENV / env.prod.ts

export const ENV = {
    API_URL: "http://prod-url.com/"
}

然后我将导入到我要使用该文件的位置：

./ SRC /应用/页/家/ home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ENV } from '@app/env';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    console.log(ENV.API_URL);
  }

}

这适用于dev或我指定的任何其他环境，并且控制台会注销相应的URL。

然而，当我跑步时：

APP_ENV=prod ionic serve --prod，

我得到以下内容：

Error: Cannot find module "@app/env"
    at Object.192 (http://localhost:8100/build/main.js:44:7)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.261 (http://localhost:8100/build/main.js:157:75)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.212 (http://localhost:8100/build/main.js:99:73)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.193 (http://localhost:8100/build/main.js:81:70)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at webpackJsonpCallback (http://localhost:8100/build/vendor.js:26:23)
    at http://localhost:8100/build/main.js:1:1

我真的不确定prod与其他任何环境有什么不同。我错过了什么吗？

Answer 1

如果查看@ ionic / app-scripts / config / webpack.config.js，则表明app-scripts v3的格式可能已更改。

此v3格式最终需要以下内容：

module.exports = {
  dev: devConfig,
  prod: prodConfig
};

如果这种格式是问题，也许您可以尝试以下内容：

var path = require('path');
var defaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

var env = process.env.APP_ENV ? process.env.APP_ENV : 'dev';

var devWebPackConfig = defaultConfig.dev;
devWebPackConfig.resolve.alias = {
  "@app/env": path.resolve('./src/env/env.' + env + '.ts')
};

var prodWebPackConfig = defaultConfig.prod;
prodWebPackConfig.resolve.alias = {
  "@app/env": path.resolve('./src/env/env.' + env + '.ts')
};

module.exports = {
  dev: devWebPackConfig,
  prod: prodWebPackConfig
};

Ionic中的动态环境变量 - 找不到模块

1 个答案: