使用cdn加载vue.js

2018-02-16 本文已影响2642人 fengbj

搭建vue的时候，一般都使用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
```
build: {
    // ...
    assetsPublicPath: './'
    // ...
}
```
这里不修改也可以，因为测试的时候，实在本地打开，默认是/根目录，要修改为相对目录./。

所以要修改build里面的assetsPublicPath。
修改src/main.js,
```
new Vue({
  el: '#app',
  router,
  // template: '<App/>',
  render (h) {
    return h('App');
  },
  components: { App }
});
```
把字符串模板templat修改为函数式,

这里使用体积小的vue，不带有字符串解析编译器。因为运行时版本相比完整版体积要小大约 30%。

也可以不用修改，就使用完整版。vue对不同构建版本的解释。

如果你是使用vue-cli创建的项目，*.vue单文件开发项目，默认会编译template，成函数式。所以，如果你是这样，完全可以使用体积小的vue，

但是，由于默认只会编译单文件内的template，里面的script，如果你用jsx编写，就不会编译，所以这里需要把src/main.js，字符串模板templat修改为函数式。

如果你想在js文件内，在单文件里面的script使用jsx编写，可以按照vue文档内的方法，安装 Babel 插件。在最新的vue webpack，默认已经安装了，如果没有安装，需要自行安装

所以也可以这样写
```
new Vue({
 el: '#app',
 router,
 // template: '<App/>',
 render () {
   return <App/>;
 },
 components: { App }
});
```
修改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文件夹看看是否正确。

使用cdn加载vue.js

修改

猜你喜欢

热点阅读