项目部署在内网导致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

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
缓存 运维 负载均衡
CDN请求过程详解
CDN主要是让用户访问资源的时候,能从离用户距离很近的CDN节点进行获取,不必到真正提供服务的机器上获取。所以CDN可以
|
存储 对象存储 CDN
【对象存储OSS/网络分发加速CDN】使用OSS后,如何实现流量访问限制或请求次数的限制
描述使用对象存储OSS后,如何实现流量访问限制或请求次数的限制
2304 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控制着互联网上成千上万的用户的数据的传输。
2182 0
|
8天前
|
安全 CDN
阿里云CDN产品解读及全站加速在游戏行业的最佳实践!
阿里云CDN(内容分发网络)为全球用户提供快速、稳定、安全的内容分发加速服务,显著提升访问响应速度和成功率
|
4月前
|
域名解析 网络协议 安全
阿里云CDN
本文介绍阿里云CDN产品中涉及的基本概念,便于您更准确地理解和使用CDN产品。
122 5
|
弹性计算 缓存 运维
【运维知识进阶篇】用阿里云部署kod可道云网盘(DNS解析+CDN缓存+Web应用防火墙+弹性伸缩)(三)
【运维知识进阶篇】用阿里云部署kod可道云网盘(DNS解析+CDN缓存+Web应用防火墙+弹性伸缩)(三)
199 0
|
4月前
|
域名解析 网络协议 CDN
网站接入阿里云CDN实现域名加速全流程
阿小云网站已通过ICP备案在广州节点上线,但为提升全国用户访问速度,计划接入CDN。以下是4步CDN接入教程:1) 开通阿里云CDN服务;2) 添加加速域名;3) 使用DNS解析验证域名归属权;4) 配置CNAME实现域名与CDN节点关联。详细指南见阿里云CDN官方文档。
206 2
|
4月前
|
弹性计算 缓存 安全
【阿里云弹性计算】阿里云ECS与CDN结合:构建高性能全球内容分发网络
【5月更文挑战第26天】阿里云ECS与CDN结合打造高性能全球内容分发网络,通过ECS的弹性伸缩和安全可靠性,配合CDN的全球覆盖、高可用性及安全防护,提升访问速度,减轻服务器压力,优化数据传输。以WordPress为例,通过配置CDN域名和ECS,实现高效内容分发,提高系统扩展性和稳定性。此解决方案满足用户对访问速度和稳定性的高要求,为企业提供优质的云计算体验。
159 0
|
4月前
|
缓存 网络协议 Serverless
阿里云CDN简介和使用流程
本文档介绍了如何在阿里云上配置和使用CDN服务。首先,需要注册并实名认证阿里云账号,然后购买CDN服务。接着,添加要加速的域名,通过CDN控制台和阿里云云解析DNS进行配置,并验证CNAME设置是否生效。之后,配置源站信息,可以选择OSS域名、IP、源站域名或函数计算域名作为源站。最后,设置缓存规则,如缓存过期时间、状态码过期时间、自定义HTTP响应头等,以优化资源访问效率。
阿里云CDN简介和使用流程