Angular CLI发布路径的配置项浅析
前言
项目发布总需要根据具体情况配置打包，Angular CLI 提供了方便的打包工具 “ng build”。其中关于发布路径的配置有几样，这里总结汇总它们。
base-href
它指定的是项目构建的目录结构，例如设置为 "deploy-test"，最后的打包结果就在 dist/deploy-test 目录下。
项目新建时，在 index.html 下默认是 <base href="/" rel="external nofollow" >，也就是指定这个应用相对根目录运行。这时候，页面的相对路径会基于这个配置，例如  的实际访问路径是 /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" rel="external nofollow" >
- 采用 CLI 命令行参数来配置：ng build --baseHref=/XXX/
- 在 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>
又例如有图片 ，最后打包后路径就会便变为 ”/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发布路径内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Angular CLI发布路径的配置项浅析
前言 项目发布总需要根据具体情况配置打包,Angular CLI 提供了方便的打包工具 "ng build".其中关于发布路径的配置有几样,这里总结汇总它们. base-href 它指定的是项目构建的目录结构,例如设置为 "deploy-test",最后的打包结果就在 dist/deploy-test 目录下. 项目新建时,在 index.html 下默认是 <base href="/" rel="external nofollo
-
Angular CLI 使用教程指南参考小结
安装 要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新的Angular CLI: 注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持. npm install -g angular-cli 在 Mac 或 Linux 平台上,你可能需要添加sudo前缀提权进行全局安装: sudo npm install -g angular-cli 基本用法 你可以通过 Angular CLI 的 help 命令来获取相关的命令信息. ng
-
详解Angular CLI + Electron 开发环境搭建
本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家 用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el
-
Angular CLI 安装和使用教程
背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line Interface的简写,是一种命令行接口,实现自动化开发流程,比如:ionic cli.vue cli等:它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布. 安装Angular CLI 1.首先确认安装了node.js和npm // 显示当前node和npm版本 $ node -
-
简单谈谈关于Angular Cli打包的事
本文主要给大家介绍了关于Angular Cli打包的事,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.引言 Angular从开发再到生产环境部署都离不开Angular Cli工具集,而Angular Cli本质上是使用 Webpack(当前使用版本为2) 来打包资源. Webpack 本身并不复杂,略用过一点都清楚,只需要创建一个 webpack.config.js 的文件并简单的配置,就可以把一个复杂的应用所有文件全部打包成若干静态资源文件. 然而一个复杂的应用免不了使
-
.Net Core+Angular Cli/Angular4开发环境搭建教程
一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul
-
Angular 开发学习之Angular CLI的安装使用
前面我们已经准备好开发环境,现在可以正式开发了.正如前面提到的,Angular 提供了一个命令行工具,可以简化我们的程序开发.我们今后的开发也会使用这一工具,因此我们需要首先安装这个名为 Angular CLI 的开发工具. 安装 CLI 的过程很简单,与安装其它工具.甚至是安装一个普通开发包没什么区别.我们前面已经配置好 NPM Registry.安装成功 yarn,那么就使用 yarn 来安装这个工具.具体的命令是: yarn global add @angular/cli 参数 globa
-
Angular4学习之Angular CLI的安装与使用教程
简介 关于"Angular"版本,"Angular"官方已经统一命名Angular 1.x同一为Angular JS,Angular 2.x及以上统称"Angular". "CLI"是"Command Line Interface"的简写,是一种命令行接口,实现自动化开发流程. 比如:ionic-cli.vue-cli等:它可以创建项目.添加文件(组件,服务等)以及执行一大堆开发任务,比如测试.打包和发布
-
使用Angular CLI生成路由的方法
第一篇文章是: "使用angular cli生成angular5项目" :http://www.jb51.net/article/136621.htm 第二篇文章是: "使用angular cli从蓝本生成代码" :http://www.jb51.net/article/137031.htm 我们知道使用 ng g module admin 将会生成admin module. 而使用 ng g m sales --routing 则将会生成sales和 sales-
-
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Angular CLI是一个命令行界面工具,它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布,这里的快速开始就是基于这个命令. 开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 一:用命令行新建一个项目 ng new newApp --skip-install cd newApp cnpm install ng serve --open 执行上面的命令就会自动新建一个Angualr项目,并启动