正确姿势使用vue cli3配置多页项目
2020-02-03 02:07
323 查看
多页面配置
我们在使用vue cli3脚手架构建页面时,大多都是单页应用(这其中的优势我就不多说了),但是在某些场景,我们需要构建多页应用,例如我们我们应用中有很多小型h5页面,或者多种活动页,这些页面互相之间没有什么关联,如果每个活动页面都构建一个应用,那也是不切实际的,所以我们需要使用vue脚手架构建多页应用,其中在vue-cli2.x版本配置多页需要修改的地方还是挺繁琐,不过好在cli3版本增加了pages属性,配置起来相当轻松。
项目源码地址 multi-pages
创建多页应用
首先
vue create multi-pages初始化名为
multi-pages的项目,我们删除views文件夹,新建一个名为
pages的文件夹,并创建
index、
page1、
page2文件夹如下:
这里index代表了项目首页,page1、page2在这里可以理解为需要构建的其他页面,我们可以在各自的页面文件下创建属于他们的入口文件index.js(相当于单页应用的main.js)、 router路由、组件components、vuex、axios等等,我们就把他们每个理解为独立的单页应用。
配置vue.config.js
在项目中创建
vue.config.js文件来配置我们的多页应用。话不多说,整干货:
const glob = require('glob') function getEntry(url) { let entrys = {} glob.sync(url).forEach(item => { // splice(-3)取数组后三项 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('./src/pages/**?/*.html') module.exports = { pages }
这里主要用到
glob模块来处理多页路径,这样做的好处就是不用再pages添加后文件,再来vue.config.js中添加pages对象属性,当页面多时,这是相当繁琐的,所以我们需要借助
glob模块,调用glob.sync(url)返回匹配到的路径数组,有关路径匹配规则,如下:
1、* :匹配单个路径部分中的0个或多个字符。 2、?:匹配路径中某部分1个字符。 3、[...] :匹配一个字符的范围,类似于一个正则表达式的范围。如果范围的第一个字符是!或者,它匹配任何不在范围内的字符。 4、!(模式1|模式2|模式3):匹配与所提供的任何模式不匹配的任何内容。和正则表达式的!一样。 5、?(模式1|模式2|模式3):匹配所提供的模式的零或一个事件。 6、+(模式1|模式2|模式3):匹配所提供的模式的一个或多个事件。 7、*(a|b|c) :匹配所提供的模式的零个或多个事件。 8、@(pattern|pat*|pat?erN):匹配所提供的模式之一。 9、**:如果**在一个路径的部分,他会匹配零个或多个目录和子目录中搜索匹配。
运行
npm run serve输入
http:localhost:8080跑动程序:
点击page1 、page2 都会重新请求刷新页面,最后
npm run build打包程序:
至此vue cli3多页面配置就简单实现了,大家可以依照这个例子,在实际项目中构建更多功能!
想学习并实践开发vue项目的同学,可以关注我的个人后台管理spa页面,项目地址 vue-admin-webapp 欢迎star,fork
- 点赞 1
- 收藏
- 分享
- 文章举报
相关文章推荐
- Android NDK——使用Android Studio引用so库,jar包、module以及导入Eclipse项目并使用JNI的正确姿势
- 使用开源项目的正确姿势,都是血和泪的总结!
- 使用Idea打开Maven项目的正确姿势
- 使用git的正确姿势一(项目开发使用git的正确顺序)
- 使用开源项目的正确姿势,都是血和泪的总结!
- vue打包项目,webpack配置改变以及图片正确引入姿势
- 使用Idea打开Maven项目的正确姿势
- 使用开源项目的正确姿势,都是血和泪的总结!
- 使用TFS-如何删除TFS上项目的正确姿势
- Windows ECS上如何以正确的姿势配置FTP Server使用NAS
- Windows ECS上如何以正确的姿势配置FTP Server使用NAS
- 关于在JavaWeb项目时加入的日志相关的jar包,没有正确配置日志即使用时的警告解决
- vue(webpack3.X)项目中如何使用.svg图标,你是否遇到正确配置却无法显示?
- android studio 3.0版本下使用lambda表达式的正确配置姿势
- 使用开源项目的正确姿势,都是血和泪的总结!
- IDEA maven项目下测试mybatis例子,使用mappper class或package引入mapper映射文件,总是报错Invalid bound statement(所有配置完全正确)
- 使用Log4j为项目配置日志输出应用详细总结及示例演示.
- “调制解调器已在使用或没有正确配置(6633)”的终极解决方案
- 使用OpenCV 2.3.1编程--建立项目后配置环境
- Ant的项目配置文件build.xml(使用jboss-4.2.3GA-jdk6.zip)