Question

我在angular7应用程序上的构建产品流程中生成的文件遇到问题：

构建产品使用以下标志完成：

ng build myApp --aot=true --progress=false --base-href=/app-ng/ --output-path=dist/ --prod --configuration=production --output-hashing=none

由于不同的要求，索引获取vendor.js，main.js文件等的路径需要进行如下修改：

来自：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PeopleOs</title>
  <base href="/app/">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" sizes="32x32" href="/ui/design/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/ui/design/favicon-16x16.png">
  <link rel="icon" type="image/x-icon" href="/ui/design/favicon.ico">
<link rel="stylesheet" href="../conference-ng/styles.a4bd136a77b52601cadb.css"></head>
<body>
  <pplos-root></pplos-root>
<script type="text/javascript" src="/runtime.dcdd77c06796f7b1eee4.js"></script><script type="text/javascript" src="/polyfills.6c7e1fff37149795538b.js"></script><script type="text/javascript" src="/main.134c83da3aea9780ff98.js"></script></body>

至：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PeopleOs</title>
  <base href="/app/">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" sizes="32x32" href="/ui/design/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/ui/design/favicon-16x16.png">
  <link rel="icon" type="image/x-icon" href="/ui/design/favicon.ico">
<link rel="stylesheet" href="../conference-ng/styles.a4bd136a77b52601cadb.css"></head>
<body>
  <pplos-root></pplos-root>
<script type="text/javascript" src="../app-ng/runtime.dcdd77c06796f7b1eee4.js"></script><script type="text/javascript" src="../app-ng/polyfills.6c7e1fff37149795538b.js"></script><script type="text/javascript" src="../app-ng/main.134c83da3aea9780ff98.js"></script></body>

请注意索引从获取捆绑文件的位置开始的src更改

这很好用，但是angular 7正在构建一个我无法识别的额外文件，它不是从index.html获取的，而是从其他地方获取的。由于即时通讯无法像我与其他人一样修改该文件的网址，因此此提取最终会出错。

这是构建过程的输出：

Date: 2019-07-11T13:04:42.096Z
Hash: 85d1d51fc7a58f145037
Time: 109542ms
chunk {0} runtime.js (runtime) 2.11 kB [entry] [rendered]
chunk {1} main.js (main) 82 kB [initial] [rendered]
chunk {2} polyfills.js (polyfills) 114 kB [initial] [rendered]
chunk {3} styles.css (styles) 37.3 kB [initial] [rendered]
chunk {4} vendor.js (vendor) 1.11 MB [initial] [rendered]
chunk {5} 5.js () 405 kB  [rendered]

该“ 5.js”无法识别index.html在运行时如何对其进行检索。我检查了它，其中包含我的角度应用程序模块中的常量文件和组件。

是否可以将此文件捆绑到vendor.js或main.js中并摆脱它？
有一种方法可以指定一个通用的URL前缀，该前缀附加到所有提取的文件（以及5.js文件）上？例如：“ ../ app-ng /”已移至angular.json或webpack配置变量
还有其他想法可以帮助您吗？

该应用程序正在某些NGINX规则下运行，这使得该文件的提取成为可能。

谢谢。

Answer 1

您使用deploy-url选项指定从何处加载js / css文件文件

ng build ... --deploy-url ../app-ng

Angular 7构建-产品生成的文件

1 个答案: