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

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

Posted in Javascript onMarch 29, 2021

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 服务器中。

Javascript 相关文章推荐
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
如何提高javascript加载速度
Dec 26 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
vue实现图书管理系统
Dec 29 Vue.js
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
JavaScript 语句之常用 for 循环详解
Mar 29 #Javascript
vue+django实现下载文件的示例
You might like
摩卡咖啡
2021/03/03 咖啡文化
4.与数据库的连接
2006/10/09 PHP
建立动态的WML站点(一)
2006/10/09 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python引用DLL文件的方法
2015/05/11 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python实现动态数组的示例代码
2019/07/15 Python
python区分不同数据类型的方法
2019/10/14 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
python3 使用traceback定位异常实例
2020/03/09 Python
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
财务会计专业求职信范文
2013/12/31 职场文书
学期评语大全
2014/04/30 职场文书
工会趣味活动方案
2014/08/18 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
离职信范本
2015/06/23 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
windows系统搭建WEB服务器详细教程
2022/08/05 Servers
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers