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[urlArr[1]] = {
- entry: 'src/pages/' + urlArr[1] + '/index.js',
- template: 'src/pages/' + urlArr[1] + '/index.html',
- filename: urlArr[1] + '.html',
- title: 'pages-' + urlArr[1]
- }
- })
- return entrys
- }
- let pages = getEntry()
- module.exports = {
- pages
- }
复制代码
欢迎指教!!!
|
|