关于前端:浅析-Angular-CLI-发布路径的配置项

5次阅读

共计 2845 个字符，预计需要花费 8 分钟才能阅读完成。

我的项目公布总须要依据具体情况配置打包，Angular CLI 提供了不便的打包工具“ng build”。其中对于公布门路的配置有几样，这里总结汇总它们。

它指定的是我的项目构建的目录构造，例如设置为 “deploy-test”，最初的打包后果就在 dist/deploy-test 目录下。

我的项目新建时，在 index.html 下默认是 <base href="/" >，也就是指定这个利用绝对根目录运行。这时候，页面的相对路径会基于这个配置，例如 ![](image/test.png) 的理论拜访门路是 /image/test.png。

它不会扭转资源申请门路：

<body>
  <app-root></app-root>
  <script src="runtime.js"></script>
  <script src="polyfill.js"></script>
  <script src="styles.js"></script>
  <script src="main.js"></script>
</body>

不过咱们的我的项目经常放在一个子目录下运行，例如在 tomcat 的 webapps 下新建一个“deploy-test”我的项目目录。所以相应的，base-href 也要设置为“/deploy-test/”。

要留神的是，这里的斜杠（/）必不可少，假如服务器子目录叫“test”，打包部署状况如下：

test：如果中间都不加，baseHref 失效，能够获取到资源。但利用生成的浏览器门路谬误，为 host:port/test/test#/index，刷新页面会找不到 index.html。
/test：只加结尾，baseHref 有效，资源绝对 host:port 根目录加载，报 404。
test/：只加结尾，资源申请门路为 host:port/test/test/XXX.js，报 404。
/test/：利用生成门路为 host:port/test/#/index，资源正确加载。

打包时要批改 base-href，次要有三种形式：

在 index.html 中配置 <base href="XXX" >
采纳 CLI 命令行参数来配置：ng build --baseHref=/XXX/

在 angular.json 中配置：

 "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {"baseHref": "/kanpm/",}
    }
 }

即 baseHref 用以配置利用的部署门路。

如果是将资源和利用放在同一个服务器目录下，baseHref 即可，然而如果资源和利用在不同地位呢？
例如，利用部署在 “/app” 目录下，资源文件放在”/app/resource“；又或者想要通过 cdn（如 cdn.example.com）托管减速利用的各种资源，同时在本人服务器上部署利用自身。

配置 deploy-url 会在打包时批改资源申请门路，例如 --deploy-url=/app/resource/，则最初打包的 index.html 为：

<body>
  <app-root></app-root>
  <script src="/app/resource/runtime.js"></script>
  <script src="/app/resource/polyfill.js"></script>
  <script src="/app/resource/styles.js"></script>
  <script src="/app/resource/main.js"></script>
</body>

又例如有图片 ![](test.png)，最初打包后门路就会便变为”/app/resource/test.png“。

相应的，它也能够在 angular.json 或者命令行中配置

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {"deployUrl": "/test/",}
  }
}

或者 ng build --deploy-url="/test/"

✨留神：deploy-url 只能批改被打包的资源文件。

设置了 base-href 之后，款式文件中引入的资源门路的行为在各个 CLI 的版本下会有不同：

2~7 版本下会主动增加 base 门路。例如 url("/assets/path/to/my/asset.png")，会主动在后面叠加 base-href。
8 版本长期新增了 –rebase-root-relative-css-urls=true 命令行参数，能够放弃和之前版本行为统一，不便过渡，然而下个版本就废除。
9 当前的版本，要求应用相对路径来引入资源门路，所以组件中的款式文件引入能够这样写（url("~src/assets/path/to/my/asset.png")）。

因为 baseHref 是一个运行时的值，用以管制 Angular 利用的相对路径。不应该用来解决编译时的打包行为，针对打包的依赖治理，应该由 webpack 通过相对路径去辨认，也不便对资源进行额定的解决（例如给资源文件名加上 hash 值，确保不会被缓存）。

✨留神：打包时，会导致须要打包资源会被 webpack 复制一份放入 dist 根目录（assets 文件夹中也还存在一份原版）。所以款式或组件中引入的文件，应该放在 assets 目录外，因为 CLI 创立我的项目时，angular.json 的默认配置是:

"architect": {
  "build": {
    ...
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets",
      ],
  }
}

能够看到，默认配置中，assets 文件夹中的文件，都会不经打包间接复制到 dist 文件夹中（我集体感觉 Nuxt 的目录命名，叫 statics 动态文件夹就更贴切）。须要在组件中 import，或者款式文件中以相对路径引入的文件，就放另一个文件夹，不须要在 angular.jsn 中配置，免得打包后存在反复文件。

咱们能够试着把它们配合应用来总结一下：

ng build --prod --base-href="/kanpm/" --deploy-url="/kanpm/resource/"

失去编译打包的 dist/kanpm 文件夹后，咱们将所有打包编译的文件都放入服务器 kanpm/resource 目录下，而 index.html 和其余间接复制的动态文件，放在服务器 kanpm/ 目录下。申请 host:port/kanpm 就会发现我的项目就胜利运行了！

由此能够看出，base-href 决定的是利用的部署地位，也就是用户通过什么门路可能拜访这个网站。而 deploy-url 决定的是打包后的资源文件（图片，字体，js 等）被部署在哪里，能够如上示例是利用的子目录下，也能够是某个 cdn 服务器中。

正文完