Angular 8：配置环境

Question

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

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

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

  

ng build --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文件，并修改配置节点。

3. 按照下面提到的修改您的angular.json配置。

4. 为获得更好的可读性，请使用任何在线JSON Viewer。

   {“配置”：{“生产”：{“ fileReplacements”：[{“替换”：“ src / environments / environment.ts”，“ with”：“ src / environments / environment.prod.ts”} ]，“ optimization”：true，“ outputHashing”：“ all”，“ sourceMap”：false，“ extractCss”：true，“ namedChunks”：false，“ aot”：true，“ extractLicenses”：true，“ vendorChunk”： false，“ buildOptimizer”：true，“预算”：[{“ type”：“初始”，“ 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“：正确，” budgets“：[{” type“： “ initial”，“ maximumWarning”：“ 2mb”，“ maximumError”：“ 5mb”}]}，“ uat”：{“ fileReplacements”：[{“ replace”：“ src / environments / environment.ts”，“ with “：”“ src / environments / environment.uat.ts”}]，“优化”：tr ue，“ outputHashing”：“全部”，“ sourceMap”：false，“ extractCss”：true，“ namedChunks”：false，“ aot”：true，“ extractLicenses”：true，“ vendorChunk”：false，“ buildOptimizer”： true，“ budgets”：[{“ type”：“ initial”，“ maximumWarning”：“ 2mb”，“ maximumError”：“ 5mb”}]}，“ gr”：{“ fileReplacements”：[{“ replace”： “ src / environments / environment.ts”，“ with”：“ src / environments / environment.gr.ts”}]，“ optimization”：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

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

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