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

版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/88738043

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~~
.
总结一下，分析给大家看，继续看下面。

原因分析：

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

然后，看一下bug截图：

解决办法：

• 舍弃引用外部的CDN；

• 替代成本地的cdn文件：

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

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

---

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