首页 > 上网技巧 > 电脑小技巧 > 使用cdn加载vue.js

使用cdn加载vue.js

时间:2020-09-20 21:12 作者:QQ地带 我要评论

起因
使用vue官方推荐的命令行工具.默认会把所有代码合并生产新文件.包括自己写的和各种库,例如vue
 
虽然会把vue这样的公共代码分离出来,但由于还是放在自己服务器,如果使用cdn的话,会更利于程序的加载速度.
 
修改
如何使用官方命令行创建项目,这里就不做说明了,
 
修改build/webpack.base.conf.js,在最下面加入
 
externals: {
  'vue': 'Vue'
}
webpack的文档,是这样说的.
 
防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
 
对这里,就是需要把vue不要打包进去,从cdn获取vue
 
修改config/index.js
 
assetsPublicPath: './'
不修改也可以,因为在本地打开,默认是/更目录,要修改为相对目录./
 
修改src/main.js,
 
new Vue({
  el: '#app',
  router,
  // template: '<App/>',
  render (h) {
    return h('App');
  },
  components: { App }
});
把字符串模板templat修改为函数式,
 
也可以不用修改,vue对不同构建版本的解释,
 
如果不修改,就需要使用完整包的vue,
 
这里使用相对体积比较小的,但没有字符串解析编译,vue.runtime.js
 
运行时构建相比完整版缩减了 30% 的体积,
 
修改index.html,把cdn放进去,
 
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.runtime.js"></script>
在生产环境,可以使用vue.runtime.min.js
 
最后执行
 
npm run build
编译完成以后,在dist文件夹看看是否正确.

标签: vue.js
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告