首页 > 其他分享 >关于 Angular 部署以及 index.html 里 base hRef 属性的关联关系

关于 Angular 部署以及 index.html 里 base hRef 属性的关联关系

时间:2022-11-08 11:06:46浏览次数:50  
标签:index href html 应用程序 文件夹 base

直接在 SAP 电商云 Spartacus UI 项目下,运行命令行 ng build, 输出如下:

dist 文件夹:

把 dist 文件夹下的 mystore 直接放到 tomcat webapps 文件夹下面,运行时:

如果修改 base 标签页的 href 属性:

则 index.html 里的几个 JavaScript 资源文件都加载不了:

Error: Error: Cannot get base site config! Current url (http://localhost:8080/mystore/) doesn't match any of url patterns of any base sites.

看看 ng serve 为什么能够工作?

localhost:4200 自动变成:http://localhost:4200/electronics-spa/en/USD/

在这里插入图片描述

我们不推荐修改 Spartacus 的 index.html 里的 base 标签页的 href 属性。

在开发过程中,开发人员通常在包含 index.html 的文件夹中启动服务器。 这是根文件夹,需要在 index.html 顶部附近添加 <base href="/">, 此处的 / 是应用程序的根目录。

但在共享服务器或生产服务器上,正如本文提到的 tomcat 的使用场景(我们将 ng build 生成的 dist/mystore 文件夹整个拷贝到了 tomcat 的 webapps 文件夹下)可能会从子文件夹中为应用程序提供服务。 例如,当加载应用程序的 URL 类似于 http://www.mysite.com/my/app 时,子文件夹是 my/app/,应该添加 <base href="/my/app/">index.html 的服务器版本。

当基本标记配置错误时,应用程序无法加载,并且浏览器控制台显示 404 - Not Found 错误消息。

需要根据这些错误消息来调整生产系统上的 base href 设置。

这样势必造成开发环境和生产环境具有两套不同的 index.html 源代码。

base href 也可以用来定义 Angular 路由器的默认基础(参见 APP_BASE_HREF)。 具有更复杂使用场景的用户,可能需要在应用程序中手动配置 APP_BASE_HREF 令牌(例如,应用程序路由的 base 路径是 /, 但 assets 和 scripts 等资源文件需要放在 /assets/ 文件夹下面)。

标签:index,href,html,应用程序,文件夹,base
From: https://blog.51cto.com/jerrywangsap/5832267

相关文章

  • HTML-head元素
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><!--下面这些标签可用在head部分:<base>,<link>,<meta>,<script>,<style>,......
  • Excel VBA中ADO连接mysql数据库报错:no database selected 解决方案
    几天翻到一个以前连接mysql数据库的Excelvba文件,试了一下,居然链接成功,但是执行sql的时候一直报错说什么nodatabaseselected百度谷歌了老半天,终于找到了解决方案,其......
  • C#把图片转为base64
    publicstaticImageUrlToImage(stringurl){try{WebClientmywebclient=newWebClient();byte[]B......
  • 爱国者256G加密U优盘二次恢复之解密及财务账套sybase数据库修复
    ​这是今年以来难度最大的U盘数据恢复案例,U盘是爱国者256G的,联系我们之前已经被多家公司处理过,据说还刷过固件,但最终都恢复失败。爱国者这种128、256G的大容量U盘我们有很多......
  • 爱国者256G加密U优盘二次恢复之解密及财务账套sybase数据库修复
    这是今年以来难度最大的U盘数据恢复案例,U盘是爱国者256G的,联系我们之前已经被多家公司处理过,据说还刷过固件,但最终都恢复失败。爱国者这种128、256G的大容量U盘我们有很多......
  • 动态爱心-详细教程(小白也会)(HTML)
    动态爱心超级超级超级简单!!!赶紧做给你们的"Ta"看吧!(最后有详细步骤)视频效果:话不多说直接上代码点击查看代码<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Tran......
  • JAVA base64 工具类
    importjava.io.UnsupportedEncodingException;importjava.util.Iterator;importjava.util.Map;importjava.util.Set;importjava.util.SortedMap;publicclassBase64Ut......
  • HTML,CSS,JavaScript的介绍
    网页组成:HTML,CSS,JavaScript:Html相当于骨架,Css相当于皮肤,JavaScript相当于肌肉三者结合起来形成完善的网页HTML超文本标记语言(hypertextmarkuplanguage)决定网......
  • html标签分类
    html标签可以分为行内元素和块元素一、行内元素可以和其他行内元素处在同一行。a、input、img、span(没有任何样式的行内元素)二、块元素自己独占一行。p、h、div(没有......
  • Database - 常见面试题
    1、在使用leftjoin时,on和where条件的区别1、on条件是在生成临时表时使用的条件,它不管on中的条件是否为真,都会返回左边表中的记录。2、where条件是在临时表生成......