vue 多页面配置cli4.4（一 配置）

最近想试试vue多页面的配置，发现好多例子有点不齐，所以这里写一下 多页面配置的 初期搭建（基于 vue2.0 cli 4.4 比较新了）

1、第一步搭建项目就不说了，也没什么格外要配置的

2、由于是多页面，每个页面有自己的一套 路由，store，app.vue，main.js，所以 以前的 public 下的 index.html 和 独一的 app.vue main.js 文件可以删除了，新建page目录 下面各自创建对应单页面的 路由 store 组件 css 入口 出口 ，配置好 大概类似 小程序的目录结构 （ 我这里做测试，公用了一份store ）

3、接下来 就是 配置 打包相关的 修改vue.config.js 文件

module.exports = {
  lintOnSave: false,
  pages: {
    kangWei: {
      // page 的入口
      entry: 'src/page/kangwei/kw.js',
      // 模板来源
      template: 'src/page/kangwei/index.html',
      // 在 dist/index.html 的输出
      filename: 'kw.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'kw多页测试',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors','chunk-common','kangWei']
    },
    wanBo: {
      // page 的入口
      entry: 'src/page/wanbo/wb.js',
      // 模板来源
      template: 'src/page/wanbo/index.html',
      // 在 dist/index.html 的输出
      filename: 'wb.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'wb多页测试',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors','chunk-common','wanBo']
    },
  },
}

这里注意 page 的值，对应的就是 每个页面的 信息，需要注意的是 完成配置后，路由要访问对应的单页面 路径应该是 http://192.168.43.657:8080/kangWei 这种 就相当于 访问 page 下的 xxx 页面

4、路由配置

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'kwIndex',
    component: () => import(/* webpackChunkName: "kwIndex" */ '../view/index.vue')
  }
]

const router = new VueRouter({
  base:'/kangWei', 这个地方可以配下基础路径
  mode: 'history',
  // base: process.env.BASE_URL,
  routes
})

export default router

5、简单测试了下store，数据可以共享 但是不能是响应式的，估计多页的开发，是每个页面都要来一套才行，目前还没有引入组件库、打包优化之类的，应该打包要优化比较多，毕竟不是每个页面都需要部分模块，打包尽可能要做到按需，后续有时间再看看打包优化