最近使用 Angular 做项目的时候,通过 ng build 打包后的资源地址都带有 localhost:4200,百思不得其解,以为是打包的问题。

最后在 index.html 的文件中发现有一个 <base> 标签,原来这个标签会在页面的所有链接上添加默认地址。以下是详细说明:

<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a><img><link><form> 标签中的 URL。

注意:添加 <base> 标签之后,对于使用相对路径的接口请求地址也会改变,所以要慎重使用。

使用 ng build 构建后资源地址引用错误的问题的更多相关文章

  1. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  2. 为了记忆和方便翻阅 vue构建后的结构目录说明

    一. ├── build              // 项目构建(webpack)相关代码             记忆:(够贱)    9个 │ ├── build.js       // 生产环 ...

  3. ng build --base-href的设定问题

    项目构建部署中遇到的问题: 1.不使用hash,如何解决刷新页面404的问题? 说明: root  指定项目地址路径,默认为nginx下的html index  默认访问index文件 try_fil ...

  4. webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  5. Jenkins构建后发送邮件

    我们首先安装Jenkins邮件扩展插件“ Email Extension Plugin ”. Jenkins和插件的安装方法见上一篇文章:http://qicheng0211.blog.51cto.c ...

  6. Vue通过build打包后 打开index.html页面是空白的

    最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...

  7. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  8. vue之webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    问题描述 一般情况下,通过webpack+vue-cli默认打包的css.js等资源,路径都是绝对的 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径 ...

  9. Java串口通信--------基于RXTX (附带资源地址)

    最近帮老师做了一个小项目,一个牧场公司想用传感器收集一些环境信息,记录到数据库里去,然后加以分析查看.这里面和传感器通信用到了串口通信,我也是接触了一下,把用到的东西分享出来. 准备工作: RXTX: ...

随机推荐

  1. 网站被k到可以使用关键词搜索到首页优化总结

    从今年二月份,刚过完年回到公司,大约一周多过后,网站就被不知名黑客攻击,然后又因为网站标题关键词堆砌导致网站被降权,从此首页不在有我的网站的踪迹,有的只是其他页面的信息,因为刚开始接触SEO,对这一块 ...

  2. 禁用 Chrome 的黑色模式/Dark Mode

    macOS Mojave 中引入了系统层面的黑色模式,Chrome 73 在应用中支行了这一模式,即系统设置为黑色模式时,Chrome 会自动适应切换到 Dark Mode. Chrome 跟随系统设 ...

  3. python:socket网络编程

    Socket 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket, 又称为“套接字”. 模块 import socket 创建套接字 socket.socket( ...

  4. springboot~zuul实现网关

    网关在微服务里的角色 在微服务架构体系里,网关是非常重要的一个环节,它主要实现了一些功能的统一处理,包括了: 统一授权 统一异常处理 路由导向 跨域处理 限流 实践一下 1 添加依赖 dependen ...

  5. Windows Server 2012 R2安装SqlServer 2016

    1.系统安装 微软操作系统 Windows Server 2012 R2 官方原版镜像 Windows Server 2012 R2 是由微软公司(Microsoft)设计开发的新一代的服务器专属操作 ...

  6. js数组去重排序(封装方法)

    <script type="text/javascript"> // arr代表数组,index代表下标 function lihua(arr, index){ arr ...

  7. 使用visualStudio2017创建一个简单的控制台程序

    步骤: 1.  打开visual studio开发工具 2. 选择文件>新建>项目 如下图所示: 3. 选择window金典桌面>控制台应用程序 并填写好想项目名称和选择项目存储地址 ...

  8. IntelliJ IDEA下如何设置JSP模板

    今天在学习Spring MVC知识时,发现自己所用的IntelliJ IDEA中自动生成的JSP文件不支持EL表达式的使用,所以就想导入新的JSP模板,方便以后使用.根据旧模板的提示,如下图 找到Se ...

  9. CSS3制作上下跳动动画箭头效果

    动画效果如下: 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...

  10. 前端页面基于JQuery的点击事件

    一,使用id选择器 1.方式一 $("#id").click(function(){ do something }) 2.方式二 $("#id").on(&qu ...