Question

我有一个可以正常运行的项目，并且当我运行命令ng build--prod时，它也可以成功编译，并且我在项目中获得了dist文件夹。现在，我在计算机上安装了xammp，因此我复制了该文件夹并粘贴到htdocs文件夹中。因此，现在我可以以localhost / dist的身份访问该文件夹，但是应用程序抛出以下错误，并且应用程序未运行。谁能告诉我到底是什么问题。

   GET http://localhost/styles.34c57ab7888ec1573f9c.css 404 (Not Found)
   GET http://localhost/main.d3384476e7e827a9f05c.js 404 (Not Found)

Answer 1

默认情况下，baseUrl是/，因此它开始在根文件夹中寻找资源。您有两种可能的解决方案。

在根文件夹中部署角度应用程序。
指定基本URL。您可以在index.html中手动指定基本URL为在head标记中 <base href="dist/"> 或者，您可以在构建angular-cli的时候指定它，它具有内置的开关--base-href

例如： ng build --prod --base-href /dist/

有关更多信息，请参阅angular-cli documentation

Answer 2

在Angular 6中，您可以在“ angular.json”配置中指定baseHref和deployUrl。



    {
      ...
      "projects": {
        "project-name": {
          ...
          "architect": {
            "build": {
              "options": {
                "baseHref": "/dist/",
                "deployUrl": "/dist",
                ...
              }
            }
          }
        }
      }
    }

通过这种方式，您无需修改index.html，也不需要在命令行中输入额外的参数即可构建应用。

Answer 3

1）ng build --prod

2）index.html应该是这样。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

3）从dist文件夹复制，您可以放置任何服务器并运行。

4）要查看结果调用，例如http://localhost:80/app

Angular 6生产版本引发语法错误

3 个答案: