vue 多页面打包配置

因为我们公司的项目是多页面应用，不同于传统单页面应用，一个包就可以了。我们必须要分模块打包，因此特意研究了下webpack，然后整理了一下多页面打包的逻辑。
1.首先，用vue-cli搭好基本的项目结构。
安装vue-cli

npm install --global vue-cli

然后用测试下

vue -V 

然后生成项目

vue init webpack hndlBuild

然后这是生成的项目结构

接下来我们对这个结构进行下调整
2. 项目结构调整
由于每个功能的路由也是单独的，因此我们需要单独的路由文件，在src下创建一个页面配置

index.js

// 页面路径配置
import router from '@/page1/router' // 你的页面文件路径
export default {
  router
}

你也可以在其中配置其他参数,
然后对main.js进行修改

import Vue from 'vue'
import App from './App'
import config from './pageConfig' //修改了配置的引入方法

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: config.router, // 这里配置路由
  components: { App },
  template: '<App/>'
})

然后就是创建对应的页面路径了

接下来就是正常的开发和打包流程
因为webpack打包是按需引入的 所以我们可以在外部直接开发组件，然后多页面引入，这样可以避免把大量时间浪费在同一件事情上。