最近想试试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,数据可以共享 但是不能是响应式的,估计多页的开发,是每个页面都要来一套才行,目前还没有引入组件库、打包优化之类的,应该打包要优化比较多,毕竟不是每个页面都需要部分模块,打包尽可能要做到按需,后续有时间再看看打包优化