Angular 8：配置环境

Question

在我的 Angular 8 项目中，我在 src/environmentsenvironment.prod.ts 中设置了 apiUrl，内容如下：

export const environment = {
  production: true,
  //apiUrl: 'http://10.0.0.4:8080',
  apiUrl: 'http://XXX.XXX.XXX.XXX:XXX'
};

开发完成后，我使用以下命令生成了 dist：

ng 构建 --prod

一切正常，但我想保留一个配置文件，我可以直接从 dist 设置 apiUrl。生成的文件如下，没有“配置文件”：

3rdpartylicenses.txt                 polyfills-es2015.9aaba84b721d907ae919.js
favicon.ico                          polyfills-es5.fa99a614a4ad800768a0.js
index.html                           runtime-es2015.27965c48d77c449cb93c.js
main-es2015.b9cf7a43235ca40f1f26.js  runtime-es5.ee2dcdf2e59a31c9da78.js
main-es5.9fc024966b7d480e3b6e.js     styles.4e9ec539174190909934.css

Answer 1

如果你想在你的服务器上运行这个应用程序，那么你不需要配置文件。您需要调整 index.html 文件中的基本“href”。

您部署的应用将从“/”开始。

如果您的应用在“/test”之类的文件夹中运行，那么您必须对其进行调整。

<base href="/test/">

重要的是用'/'关闭路径

Answer 2

这不是一个好方法，我建议您根据需要创建单独的环境。

当你有不同的 API_URL 用于不同的环境时，如何实现这一点？

请按照以下步骤解决..

1. 像我在下面创建的那样创建单独的环境文件..

2. 现在转到 angular.json 文件并修改 configuration 节点。

3. 如下所述修改您的 angular.json 配置。

4. 为了提高可读性，请使用任何在线 JSON 查看器。

   {"configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ]，“优化”：true，“outputHashing”：“all”，“sourceMap”：false，“extractCss”：true，“namedChunks”：false，“aot”：true，“extractLicenses”：true，“vendorChunk”：假，“buildOptimizer”：真，“预算”：[{“type”：“initial”，“maximumWarning”：“2mb”，“maximumError”：“5mb”}]}，“st”：{“fileReplacements”： [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.st.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap “：假，“extractCss”：真，“namedChunks”：假，“aot”：真，“extractLicenses”：真，“vendorChunk”：假，“buildOptimizer”：真，“预算”：[{“类型”： “initial”，“maximumWarning”：“2mb”，“maximumError”：“5mb”}]}，“uat”：{“fileReplacements”：[{“replace”：“src/environments/environment.ts”，“with ": "src/environments/environment.uat.ts" } ], "优化": tr ue，“outputHashing”：“all”，“sourceMap”：false，“extractCss”：true，“namedChunks”：false，“aot”：true，“extractLicenses”：true，“vendorChunk”：false，“buildOptimizer”：真，“预算”：[{“类型”：“初始”，“最大警告”：“2mb”，“最大错误”：“5mb”}]}，“gr”：{“fileReplacements”：[{“replace”： “src/environments/environment.ts”，“with”：“src/environments/environment.gr.ts”}]，“优化”：true，“outputHashing”：“all”，“sourceMap”：false，“extractCss ": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning ": "2mb", "maximumError": "5mb" } ] } }}

完成上述步骤后。

现在如下运行命令，它可能会根据您的配置而有所不同。

ng build --configuration st 

或

ng build --configuration uat

或

ng build --configuration gr

它将根据您给定的环境变量构建代码。

如果您有任何疑问，请告诉我。