热搜词
发表于 2022-8-2 17:03:48 | 显示全部楼层 |阅读模式
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等,下面是我的配置目录:
01.png

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. function getEntry() {
  4.     let entrys = {}
  5.     // 获取pages目录下后缀为html的路径
  6.     glob.sync('./src/pages/**?/*.html').forEach(item => {
  7.         // 获取页面匹配名称
  8.         let urlArr = item.split('/').splice(-3)
  9.         entrys[urlArr[1]] = {
  10.             entry: 'src/pages/' + urlArr[1] + '/index.js',
  11.             template: 'src/pages/' + urlArr[1] + '/index.html',
  12.             filename: urlArr[1] + '.html',
  13.             title: 'pages-' + urlArr[1]
  14.         }
  15.     })
  16.     return entrys
  17. }

  18. let pages = getEntry()

  19. module.exports = {
  20.     pages
  21. }
复制代码

欢迎指教!!!


全部评论0
回复
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|管理员之家 ( 苏ICP备2023053177号-2 )

GMT+8, 2025-1-24 06:16 , Processed in 0.267583 second(s), 36 queries .

Powered by Discuz! X3.5

Cpoyright © 2001-2025 Discuz! Team