leftso 773 0 2019-07-19 11:27:59

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.js使用教程 vue cdn