项目部署在内网导致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后,如何实现流量访问限制或请求次数的限制
3010 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控制着互联网上成千上万的用户的数据的传输。
2506 0
|
6月前
|
域名解析 缓存 监控
阿里云渠道商:如何排查阿里云CDN访问问题?
排查阿里云CDN访问问题需分步诊断:先检查DNS解析与CDN基础配置,再根据访问慢、内容未更新或50x错误等现象定位原因,结合ping、tracert及阿里云实时日志、节点检测等工具深度分析。掌握此流程,快速解决异常。
|
6月前
|
缓存 边缘计算 双11
阿里云渠道商:适合使用CDN 预热的场景有哪些?
本文介绍CDN预热功能在大型活动、大文件分发、周期性更新等场景中的应用。通过提前将资源推送至边缘节点,可显著降低首字节时间、减轻源站压力,提升访问效率与系统稳定性。
|
6月前
|
边缘计算 缓存 双11
阿里云渠道商:什么时候应该使用阿里云 CDN 预热?
阿里云CDN预热可将资源提前分发至边缘节点,降低首字节时间50%以上,减轻源站压力。适用于大促活动、大文件发布、定期更新、突发流量及APP资源更新等场景,提升访问速度与稳定性。首次访问求快用预热,内容更新生效用刷新。
|
6月前
|
缓存 安全 调度
阿里云渠道商:如何使用CDN加速全球业务?
阿里云CDN通过全球2800+节点,将内容分发至用户附近,实现“本地化”访问,显著降低延迟。支持智能压缩、动态缓存与HTTPS加密,兼具加速、优化与安全,助力企业高效出海,提升全球用户体验。
|
6月前
|
缓存 安全 网络安全
阿里云渠道商:怎么通过阿里云CDN提高全球用户的访问体验?
阿里云CDN通过全球2800+节点、智能调度、性能优化与安全防护三大技术,实现低延迟、高稳定的内容分发,助力企业提升全球访问体验,让业务如本地般流畅。
|
6月前
|
Web App开发 缓存 监控
阿里云渠道商:如何优化阿里云 CDN 配额的使用效率?
CDN可提升网站速度,但30%企业因配置不当致带宽超支。本文分享阿里云验证的三大优化方案:精细化缓存、智能压缩与数据驱动配额调配,最高节省40%带宽成本。附实操步骤,助你高效降本。
下一篇
开通oss服务