Fork me on GitHub

cdn 引入vue

使用cdn引入vue

webpack打包的第三方模块过大,导致最后压缩打包的dist很大,首屏加载的时候,需要等待的时间会比较长,一种有效的解决方法是将臃肿的第三方包使用cdn引入,
这么做可以将我们的压力分给其他服务器点,减轻自身的服务器压力。

参考官方文档

1
2
3
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="//unpkg.com/vuex"></script>

这时候你会发现,这段代码放在head里面,没有任何问题,开发也正常,但是发布到生产环境的时候,发现不是生产环境的vue,把 vue.js 换成 vue.min.js。
这是一个更小的构建,可以带来比开发环境下更快的速度体验。这时候会手动把vue换成

1
<script src="//cdn.jsdelivr.net/npm/vue"></script>

然而,你会发现,开发环境下又没法进行调试。

于是Vue.js API文档上网查了下,发现了一个vue全局apiVue.config.devtool = true,
该配置用于使vue生产环境版本开启调试模式。于是你在代码中引入

1
2
3
if (process.env.NODE_ENV === 'development') {
Vue.config.devtool = true;
}

然而,你发现,根本没有用,依然没有打开调试模式啊,最后,我找到了了原因,需要将vue的引入放在body后面而不是head里面

1
2
3
4
5
6
7
<body>
<div id="app">
</div>
<script src="//cdn.jsdelivr.net/npm/vue"></script>
<script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="//unpkg.com/vuex"></script>
</body>

真的是很笨,半天才知道是这么回事。

-------------本文结束感谢您的阅读-------------
如果您觉得受益了,欢迎打赏鼓励。