脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular CLI发布路径

Angular CLI发布路径的配置项浅析

 更新时间：2021年03月28日 15:29:44   作者：locotor  
这篇文章主要给大家介绍了关于Angular CLI发布路径的配置项的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

项目发布总需要根据具体情况配置打包，Angular CLI 提供了方便的打包工具 “ng build”。其中关于发布路径的配置有几样，这里总结汇总它们。

base-href

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

项目新建时，在 index.html 下默认是 <base href="/" rel="external nofollow" >，也就是指定这个应用相对根目录运行。这时候，页面的相对路径会基于这个配置，例如 ![](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，主要有三种方式：

  1. 在 index.html 中配置 <base href="XXX" rel="external nofollow" >
  2. 采用 CLI 命令行参数来配置：ng build --baseHref=/XXX/
  3. 在 angular.json 中配置：
 "architect": {
 "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
  "baseHref": "/kanpm/",
  }
 }
 }

即 baseHref 用以配置应用的部署路径。

deploy-url

如果是将资源和应用放在同一个服务器目录下，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/" rel="external nofollow" --deploy-url="/kanpm/resource/"

得到编译打包的 dist/kanpm 文件夹后，我们将所有打包编译的文件都放入服务器 kanpm/resource 目录下，而index.html 和其他直接复制的静态文件，放在服务器 kanpm/ 目录下。请求 host:port/kanpm 就会发现项目就成功运行了！

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

到此这篇关于Angular CLI发布路径配置项的文章就介绍到这了,更多相关Angular CLI发布路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • angularjs的select使用及默认选中设置

    angularjs的select使用及默认选中设置

    本篇文章主要介绍了angularjs的select使用及默认选中设置，非常具有实用价值，需要的朋友可以参考下
    2017-04-04
  • AngularJs bootstrap详解及示例代码

    AngularJs bootstrap详解及示例代码

    本文主要讲解AngularJs bootstrap，这里整理了详细的资料及简单示例代码帮助大家学习或者参考，有需要的小伙伴看下
    2016-09-09
  • 用angular实现多选按钮的全选与反选实例代码

    用angular实现多选按钮的全选与反选实例代码

    本篇文章主要介绍了用angular实现多选按钮的全选与反选实例代码，非常具有实用价值，需要的朋友可以参考下
    2017-05-05
  • 详解AngularJS 模块化

    详解AngularJS 模块化

    本篇文章主要介绍了详解AngularJS 模块化，模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。有兴趣的可以了解一下
    2017-06-06
  • AngularJS实现一次监听多个值发生的变化

    AngularJS实现一次监听多个值发生的变化

    这文章给大家介绍了如何利用AngularJS一次监听多个值发生的变化，文中通过示例代码演示，这样更方便大家理解学习，有需要的可以参考借鉴。
    2016-08-08
  • Angular.js如何从PHP读取后台数据

    Angular.js如何从PHP读取后台数据

    这篇文章主要为大家简单介绍了Angular.js如何从PHP读取后台数据，本文将Angular和PHP相结合，从后台读取数据，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • AngularJS路由实现页面跳转实例

    AngularJS路由实现页面跳转实例

    这篇文章主要为大家详细介绍了AngularJS路由实现页面跳转的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 关于AngularJs数据的本地存储详解

    关于AngularJs数据的本地存储详解

    本文主要介绍了每一个独立的JS文件或者不同的控制器如何实现数据的共享与交互的方法。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • AngularJS执行流程详解

    AngularJS执行流程详解

    本文主要介绍了AngularJS的执行流程。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • Angular2表单自定义验证器的实现

    Angular2表单自定义验证器的实现

    本文给大家介绍angular2表单自定义验证器的实现，本文给大家介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-10-10

最新评论