使用cdn引入vue - Githubissues

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

使用方式

<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换成

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

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

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

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

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

<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>

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

zp1112 / blog

使用cdn引入vue #2