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)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章