Vue配置多页面应用
Vue配置多页面应用vue常用单页面开发，在系统越做越大的时候，常会在系统内嵌套另外的页面，单页面程序已经不太适用了。
单页面应用（SinglePage Web Application，简称SPA）
只有一个html页面，只需要一开始加载一次js、css的相关资源。所有内容都包含在主页面。跳转是通过组件的切换完成的，跳转较为流畅，组件化开发，易维护。缺点：首次进入加载过慢，只能刷新局部资源。
多页面应用（MultiPage Application，简称MPA）
有多个html页面，每个页面都需要加载js、css的相关资源，首屏加载较快。缺点：跳转较慢。
多页面应用配置
单页面程序在这里不做过多介绍，接下来已vue3脚手架为例介绍多页面程序如何配置：
1. 创建项目后创建vue.config.js文件，配置多页面的映射
module.exports = {
pages: {
system: {
// 入口文件
template: "src/pages/system/index.html", // 模板文件
entry: "src/pages/system/index.js",// 这个是根入口文件
filename: "system.html", // 输出文件
title: "system" // 页面title
}
}
}
每一个页面都可以拥有一份独立的配置，如路由、vuex等，下面是我的配置目录：
index.html 可以将public/index.html 文件复制过来，当然，这个要看你自己了，在我的目录中index.js相当于main.js，其余的和单页面程序配置一致，就不一一说明了。
2. 但是当需要配置很多页面的时候，这样一个一个页面配置就稍微麻烦一点了，所以可以利用glob包来进行配置。glob模块包用于检索相应所匹配的目录。
glob下载
$ npm install glob --save-dev
vue.config.js配置
// 引入
const glob = require('glob')
function getEntry() {
let entrys = {}
// 获取pages目录下后缀为html的路径
glob.sync('./src/pages/**?/*.html').forEach(item => {
// 获取页面匹配名称
let urlArr = item.split('/').splice(-3)
entrys] = {
entry: 'src/pages/' + urlArr + '/index.js',
template: 'src/pages/' + urlArr + '/index.html',
filename: urlArr + '.html',
title: 'pages-' + urlArr
}
})
return entrys
}
let pages = getEntry()
module.exports = {
pages
}
欢迎指教！！！
页:
[1]