vue瘦身:使用cdn外链依赖

一、资源引入
<body>
  <p id="app"></p>
  <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,将引用的外部模块导入,如下:

注意:格式为 ‘aaa’ : ‘bbb’, 其中,aaa表示要引入的资源的名字,bbb表示该模块提供给外部引用的名字,由对应的库自定。例如,vue为Vue,vue-router为VueRouter.

module.exports = {
     entry: {
      app: ./src/main.js
     },
     externals:{
      vue: Vue,
      vue-router: VueRouter,
      vuex:Vuex
     }
三、去掉原有的引用

去掉import,如:

// import Vue from vue
// import Router from vue-router

去掉Vue.use(XXX),如: 有些情况下可以不需要去除

// Vue.use(Router)
经验分享 程序员 微信小程序 职场和发展