项目部署在内网导致CDN请求失败问题解决

简介: 项目部署在内网导致CDN请求失败问题解决

1.前言


原先是使用Xshell+nginx前后端分别部署,后来由于出差,电网只能使用内网,导致像vue.js、elementUI.js等资源请求失败,下面是解决办法。

2.vue.config.js修改配置


由于是vue项目,在这个文件里注释或者删除关于CDN的内容。

image.png

3.下载CDN资源


将使用CDN请求的资源下载到public目录下,原因是public文件夹下的文件不会参与打包。

选中-全选-复制-新建文件-粘贴-引入

image.png

4.在public目录下引入下载好的资源


js引入:

注意引入的格式

<!-- 在本地导入依赖资源 ---Start --->
  <!-- <script src="./vue2.6.10.js"></script> -->
  <script type="text/javascript">
    document.write(unescape("%3Cscript src='./vue.js'%3E%3C/script%3E"))
  </script>
  <script type="text/javascript">
    document.write(unescape("%3Cscript src='./elementUI.js'%3E%3C/script%3E"))
  </script>
  <!-- 在本地导入依赖资源 ---End --->

css引入:

注意引入的格式

注意事项:引入时必须使用<%= BASE_URL %>,否则,无论使用绝对路径还是相对路径引入,都不会引入成功,切记!

    <base href="/">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="index.css">

5.注意点


以上步骤是试过几次错,才最终运行起来的。

主要错误在于,路径的问题,打包后路径好几次提示错误。

重点说一下,<base href='/'>这个标签,他的意思是规定页面上所有链接的默认 URL 和默认目标

image.png

相关文章
|
缓存 运维 负载均衡
CDN请求过程详解
CDN主要是让用户访问资源的时候,能从离用户距离很近的CDN节点进行获取,不必到真正提供服务的机器上获取。所以CDN可以
|
存储 对象存储 CDN
【对象存储OSS/网络分发加速CDN】使用OSS后,如何实现流量访问限制或请求次数的限制
描述使用对象存储OSS后,如何实现流量访问限制或请求次数的限制
2902 2
|
Web App开发 缓存 负载均衡
WEB请求过程(http解析,浏览器缓存机制,域名解析,cdn分发)
概述 发起一个http请求的过程就是建立一个socket通信的过程。 我们可以模仿浏览器发起http请求,譬如用httpclient工具包,curl命令等方式。 curl "http://www.baidu.com"   返回页面数据 curl -I "http://www.baidu.com"  -I查看http响应头的信息 curl -I "http://www.baidu.com" -H "Cookie=......; Accept-Charset=...."  -H添加请求头的信息  HTTP解析 http header控制着互联网上成千上万的用户的数据的传输。
2389 0
|
3月前
|
缓存 前端开发 JavaScript
适合阿里云CDN分发的文件类型有哪些?
静态文件如网页、图片、视频等适合CDN分发,可提升加载速度,减轻源站压力。动态、私有或频繁变更内容则不适合。合理选择资源包,助力高效上云。
|
3月前
|
CDN
阿里云CDN计费价格如何收费的?一文看懂
阿里云CDN计费包含基础费用与增值服务。基础费用可选按流量、带宽峰值或月结95带宽计费,默认按流量计费;增值服务如HTTPS、QUIC、WAF、实时日志等按使用量收费,不使用不计费。支持资源包抵扣,详情参考官方文档。
477 10
|
3月前
|
缓存 监控 安全
如何设置阿里云CDN的流量阈值以避免超额费用?
在信息爆炸时代,阿里云CDN助力网站加速。合理设置CDN阈值可提升性能、节省带宽、增强安全。本文详解阈值配置步骤与监控优化,助你高效利用资源。无账号者可通过翼龙云上云,享技术支持与优惠。
|
3月前
|
缓存 前端开发 JavaScript
有哪些文件适合阿里云CDN分发?
静态、高频访问且对加载速度要求高的文件(如网页、图片、视频、下载文件)适合CDN加速,可提升性能与性价比;动态内容、私有数据、频繁更新或敏感资源则不宜使用。合理选择分发策略,优化体验并降低成本。
|
3月前
|
CDN
怎么调整阿里云CDN配额?
阿里云CDN助力网站加速,配额管理关乎性能与成本。本文详解带宽、流量、请求数配额定义,指导用户查看及申请提升配额,并解析费用影响与优化策略,助您合理规划资源,降本增效。
|
3月前
|
域名解析 缓存 监控
阿里云渠道商:如何排查阿里云CDN访问问题?
排查阿里云CDN访问问题需分步诊断:先检查DNS解析与CDN基础配置,再根据访问慢、内容未更新或50x错误等现象定位原因,结合ping、tracert及阿里云实时日志、节点检测等工具深度分析。掌握此流程,快速解决异常。