vue动态引入外部CDN导致线上项目页面无法显示 - 看了不亏

也不知道是什么原因？引用了几个远程的cdn文件，但是就是失效，cdn引入代码如下：

cdn代码如下：

    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.6.1/theme-chalk/index.css"><script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script><script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>

这几个文件，是在vue项目的index.html页面静态引入的，并没有通过webpack编译打包处理，之前都是正常的;
就是老板出差后在广东的一家小旅馆商务限网，之后发现如下图所示的截图报错，指不定有其他人遇到过相同的bug~~
.
总结一下，分析给大家看，继续看下面。

原因分析：

cdn停更或版本迭代替换或路径变更，导致引入的文件不存在？
vuejs 自己的一套 cdn解析系统导致的？
cdnjs有bug?
为什么线上项目样式出不来？但是右键open in new tabs，发现cdn文件确实存在？
为什么本地虚拟服务器跑同样的项目却可以正常显示？但本地有时候又不显示？缓存？
为什么其他浏览器（360、IE等）都可以，只有谷歌浏览器不行？然后一段时间后，其余浏览器相继也不行了？

然后，看一下bug截图：

解决办法：

舍弃引用外部的CDN；
替代成本地的cdn文件：

具体操作：
把引用的目标文件下载到本地，然后上传到自己项目服务器，在服务器建立站点cdn目录文件，进行站内文件的引用

这样处理，虽然有时候不利于优化，但是基本上没什么影响；
而且，后期不再受限于第三方cdn服务商，更有利于版本的迭代和项目文件的维护。

以上就是关于“ vue动态引入外部CDN导致线上项目页面无法显示 - 看了不亏 ” 的全部内容。

vue动态引入外部CDN导致线上项目页面无法显示 - 看了不亏相关推荐

在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...
vue组件引入外部js同时获取变量，解决重复引入
vue组件引入外部js同时获取变量引入文件支持加载成功回调,支持通过字符串变量名获取js文件的变量 /*** 引入js文件并且获取变量* @param src js路径* @param varia ...
php 导出csv文件bom,php 读取 csv 文件后, uft8bom 导致在页面上显示出现问题的解决方法...
php 读取 csv 文件后, uft8bom 导致在页面上显示出现问题的解决方法 date.csv: "ID""NAME""EMAIL" ...
vue使用javascript动态创建script - 动态引入外部js文件
一.创建 script 标签,引入 js 文件 // 创建script标签,引入外部文件let script = document.createElement('script')script.type ...
关于vue 动态引入（异步加载import和require）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度
前言: 最近在改造vue-cli 2.x + webpack2.x的项目时,由于之前路由是静态的,没有根据菜单权限动态生成前端路由.所以想对此进行改造,然后碰到了一些问题和坑,现在总结一下,避免以后继 ...
vue怎么引入外部地址_vue系列教程之微商城项目|主页
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 轮播图 1.引入轮播图组件 main.js 2.新建轮播图组件 components/zhuye/s ...
Nuxt 引入外部CDN插件配置
Nuxt配置CDN插件一般不太好配置,一般不能使用ssr渲染,这里用mavon-editor插件来说明下先在nuxt.config.js中配置插件的外部cdn链接 head:{link: [{ re ...
引入外部js如何通知页面其编码格式
快来java1234 吧 js中如何设置编码格式 <script type="text/javascript" src="xxx" charset=&qu ...
Vue动态引入JS文件
引入前请先: npm install jquery 正式代码: //动态引入JS文件 function loadJavaScript(src, callback) {let script_list=$ ...

vue动态引入外部CDN导致线上项目页面无法显示 - 看了不亏

vue动态引入外部CDN导致线上项目页面无法显示 - 看了不亏

cdn代码如下：

原因分析：

然后，看一下bug截图：

解决办法：

vue动态引入外部CDN导致线上项目页面无法显示 - 看了不亏相关推荐

最新文章

热门文章