项目部署在内网导致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后,如何实现流量访问限制或请求次数的限制
2411 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控制着互联网上成千上万的用户的数据的传输。
2209 0
|
4天前
|
负载均衡 定位技术 网络安全
阿里云国际站注册教程:阿里云cdn加速怎样
通过阿里云CDN加速,用户可以实现网站内容的快速加载,提升用户体验,同时减轻源站服务器的压力,提高网站的访问速度和稳定性
|
24天前
|
对象存储 CDN
阿里云CDN边缘脚本实现+字符转义%2B
对象存储OSS中,文件名包含+字符时,请求URL未转义会导致404错误。解决方法是将URL中的+字符转义为%2B,或通过CDN/DCDN边缘脚本自动转义。示例脚本:若URI包含+,则替换为%2B。
66 10
|
1月前
|
网络协议 网络安全 Docker
将Certbot/ACME.sh自动化申请的证书自动部署到阿里云CDN
本文介绍了阿里云 CDN SSL 证书自动更新工具,定期检查证书有效期,使用Let's Encrypt 等工具签发的证书自动更新至阿里云 CDN,支持 Docker 及 .NET 8 部署,简化证书管理流程。
|
3月前
|
云安全 网络安全 CDN
阿里云CDN遇到攻击?别慌,教你如何应对!
阿里云CDN遇到攻击?别慌,教你如何应对!
|
3月前
|
缓存 监控 安全
阿里云CDN设置阀值的指南
阿里云CDN设置阀值的指南
|
3月前
|
缓存 前端开发 JavaScript
阿里云CDN:怎么让网站变快
阿里云CDN:怎么让网站变快