Vue 2.0项目配置CDN服务解决加载慢问题

vue打包会把vue相关的组件打包到一个文件vendor.*.js（*是个随机数）
 

步骤一 资源引入

vue最外层index.html文件引入资源文
 

<body>
    <div id="app"></div>
 
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
</body>

步骤二 添加配置

在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入，如下：

module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex'
  }

  
【注意】 externals的key:value不要随便修改，暂时理解为 key是npm安装使用的名称，value为组件对外提供的名称不可随意更改（打开组件源码可见）

步骤三 去掉原有的引用

1.main.js  文件中注释掉vue
 

// import Vue from 'vue'

2.router--> index.js  文件中注释掉 vue和 vue-router：

// import Vue from 'vue'
// import VueRouter from 'vue-router'

3.修改名vue 使用路由配置为以下

Vue.use(VueRouter)

vue cdn

版权所有 © 【代码谷 - DMG】 欢迎非商用转载，转载请按下面格式注明出处，商业转载请联系授权，违者必究。（提示：点击下方内容复制出处）

源文： Vue 2.0项目配置CDN服务解决加载慢问题 ，链接：https://www.daimagu.com/article/514.html，来源：代码谷 - DMG