最近使用 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. LeetCode算法题-Robot Return to Origin(Java实现)

    这是悦乐书的第281次更新,第298篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第149题(顺位题号是657).在2D平面上有一个从位置(0,0)开始的机器人.给定其移 ...

  2. Python学习之路——Day01

    Day01 一.编程和编程语言 编程语言是人与计算机之间交流沟通的介质 编程就是人实现通过让计算机实现动作的文件 二.计算机的组成 1.控制器:负责控制指挥计算机硬件运行 2.运算器:负责数学与逻辑运 ...

  3. Winows + VSCode + Debug PHP

    一.环境 环境:Win10 二.软件 1.安装VSCode 下载地址:https://code.visualstudio.com/Download 2.PHP 代码包 版本:php-7.2.9-Win ...

  4. win10激活(免费+永久)视频教程

    U盘重装Win10系统视频教程 好久不见,不知同学们有没有想我~ 最近因为工作太忙所以好久都没有写文章了,很多朋友希望我推一期win10激活教程,所以今天带三胖打完针后,开始写一期win10激活教程: ...

  5. springboot~rabbitmq自己通过UI手动发布队列需要注意的地方

    springboot里发布队列消息 为了兼容性和可读性更好,我们一般使用json字符串做为数据载体. public void decreaseCallMonitor(CallMonitorInfo c ...

  6. Flask实战第5天:页面跳转和重定向

    GET和POST请求 在网络请求中有许多请求方式,比如GET, POST, DELETE, PUT等,最常用的就是GET和POST GET 只会在服务器上获取资源,不会更改服务器的状态,这种请求方式推 ...

  7. npm --save-dev --save 的区别

    我们在使用npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,比如: --save-dev(-D) --save(-S) 在 package.j ...

  8. 如何利用GitHub设计一个炫酷的个人网站(含代码)

    1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...

  9. vue框架入门和ES6介绍

    vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

  10. 生鲜配送管理系统_升鲜宝V2.0 供应商协同系统设计思想及设计效果展现(一)

    生鲜配送管理系统[升鲜宝]V2.0 供应商协同系统小程序设计思想及操作说明(一)     生鲜供应链企业,最重要的二个方面,其中一个是客户服务(销售订单)    另外一个就是供应商的管控,只有做好了这 ...