Question

我是Angular 2的新手。我开发了一个小项目，使用 angular-cli 生成包装。它成功生成了dist文件夹。

但是当我将此应用程序部署到服务器并点击index.html页面时，页面无法访问bundle js文件。

捆绑后

Index.html ::

<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <!-- Latest compiled and minified JavaScript -->
<script src="//rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>

<link href="styles.d41d8cd98f00b204e9800998ecf8427e.bundle.css" rel="stylesheet"></head>
<body>
  <app-root>Loading...</app-root>
<script type="text/javascript" src="inline.d41d8cd98f00b204e980.bundle.js"></script><script type="text/javascript" src="styles.b2328beb0372c051d06d.bundle.js"></script><script type="text/javascript" src="main.83a76acd0c370402d4d0.bundle.js"></script></body>

角-cli.js

{
      "project": {
        "version": "1.0.0-beta.21",
        "name": "app-name"
      },
      "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": [
            "assets",
            "favicon.ico"
          ],
          "index": "index.html",
          "main": "main.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.json",
          "prefix": "app",
          "mobile": false,
          "styles": [
            "styles.css"
          ],
          "scripts": [],
          "environments": {
            "source": "environments/environment.ts",
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
      "addons": [],
      "packages": [],
      "e2e": {
        "protractor": {
          "config": "./protractor.conf.js"
        }
      },
      "test": {
        "karma": {
          "config": "./karma.conf.js"
        }
      },
      "defaults": {
        "styleExt": "css",
        "prefixInterfaces": false,
        "inline": {
          "style": false,
          "template": false
        },
        "spec": {
          "class": false,
          "component": true,
          "directive": true,
          "module": false,
          "pipe": true,
          "service": true
        }
      }
    }

捆绑后的文件夹结构：

所以我的问题是如何在使用Angular-CLI（如下面的标签）进行打包时，在index.html文件的src标签中附加文件夹名称。

<script type="text/javascript" src="/dist/inline.d41d8cd98f00b204e980.bundle.js">

Answer 1

您是否尝试过添加

<base href="./dist/">

到你的html文件的头部？

Angular 2-Angular cli - 建立项目

1 个答案: