Vue配置多页面应用

Vue配置多页面应用
vue常用单页面开发，在系统越做越大的时候，常会在系统内嵌套另外的页面，单页面程序已经不太适用了。

单页面应用（SinglePage Web Application，简称SPA）
只有一个html页面，只需要一开始加载一次js、css的相关资源。所有内容都包含在主页面。跳转是通过组件的切换完成的，跳转较为流畅，组件化开发，易维护。缺点：首次进入加载过慢，只能刷新局部资源。

多页面应用（MultiPage Application，简称MPA）
有多个html页面，每个页面都需要加载js、css的相关资源，首屏加载较快。缺点：跳转较慢。

多页面应用配置
单页面程序在这里不做过多介绍，接下来已vue3脚手架为例介绍多页面程序如何配置：

1. 创建项目后创建vue.config.js文件，配置多页面的映射

1. module.exports = {
   
2.     pages: {
   
3.         system: {
   
4.             // 入口文件
   
5.             template: "src/pages/system/index.html",   // 模板文件
   
6.             entry: "src/pages/system/index.js",  // 这个是根入口文件
   
7.             filename: "system.html",     // 输出文件
   
8.             title: "system" // 页面title
   
9.         }
   
10.     }
    
11. }
    

复制代码

每一个页面都可以拥有一份独立的配置，如路由、vuex等，下面是我的配置目录：


index.html 可以将public/index.html 文件复制过来，当然，这个要看你自己了，在我的目录中index.js相当于main.js，其余的和单页面程序配置一致，就不一一说明了。

2. 但是当需要配置很多页面的时候，这样一个一个页面配置就稍微麻烦一点了，所以可以利用glob包来进行配置。glob模块包用于检索相应所匹配的目录。

glob下载

1. $ npm install glob --save-dev
   

复制代码

vue.config.js配置

1. // 引入
   
2. const glob = require('glob')
   
3. 
   
4. function getEntry() {
   
5.     let entrys = {}
   
6.     // 获取pages目录下后缀为html的路径
   
7.     glob.sync('./src/pages/**?/*.html').forEach(item => {
   
8.         // 获取页面匹配名称
   
9.         let urlArr = item.split('/').splice(-3)
   
10.         entrys[urlArr[1]] = {
    
11.             entry: 'src/pages/' + urlArr[1] + '/index.js',
    
12.             template: 'src/pages/' + urlArr[1] + '/index.html',
    
13.             filename: urlArr[1] + '.html',
    
14.             title: 'pages-' + urlArr[1]
    
15.         }
    
16.     })
    
17.     return entrys
    
18. }
    
19. 
    
20. let pages = getEntry()
    
21. 
    
22. module.exports = {
    
23.     pages
    
24. }
    

复制代码

欢迎指教！！！