使用cdn加载vue.js-优快云博客

本文详细介绍如何在Vue项目中利用CDN加速，通过修改webpack配置，将Vue库从项目中分离，转而使用CDN资源，从而提高加载速度。涉及修改webpack.base.conf.js、index.html等文件，以及调整main.js中的Vue实例化方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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