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

时间:2024-04-02 19:50:40

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截图:

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

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

解决办法:

  • 舍弃引用外部的CDN;

  • 替代成本地的cdn文件:

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

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


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