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 相关文章推荐
Jquery实现简单的动画效果代码
Mar 18 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
JavaScript 语句之常用 for 循环详解
Mar 29 #Javascript
vue+django实现下载文件的示例
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python创建子类的方法分析
2019/11/28 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
python脚本第一行如何写
2020/08/30 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
工作个人的自我评价
2014/01/14 职场文书
50岁生日感言
2014/01/23 职场文书
技术负责人任命书
2014/06/05 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Python中的socket网络模块介绍
2022/07/23 Python