使用cdn加载vue.js

起因

使用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文件夹看看是否正确.

转载于:https://my.oschina.net/f89/blog/1591136