vue 如何从单页应用改造成多页应用


Posted in Javascript onOctober 23, 2020

最近接到这样一个需求,将之前的三个项目合并成一个,并且要做成后台可配置化,前端动态引入组件的模板化框架。
听起来是不是很拗口。。。我自己当时都蒙了。
简单分析下需求,就是,项目A/B/C的内容是交叉的,有的页面不同,有的页面和组件是公用的,例如A项目多了个人中心及其里面所有内容(最全的一个项目,但是是放在微信中的,需要获取微信授权),B项目是通用版的项目(也就是说可以放在微信,也可以放在app内,不需要获取授权之类的。),C项目是A/B项目中共有的一个页面功能抽取出来了。
所以有的时候比如说这块功能需要调整,那么就得A/B/C三个项目关于这块的功能与页面也要一起调整。
动态化组件的意思就是,D页面由组件1234按照这样的顺序排列构成,同时D页面也供机构5、6、7共同使用,但是机构6突然想要2134这样的顺序,机构7又想要4132这样的顺序。代码依旧是一套,而不是重新拉个分支,然后这个分支将D页面改成2134给机构6,再拉个分支将D页面改成4132给机构7。这样做会增加服务器的压力,每次机构有定制化需求就重新拉分支的话,机构很多的话,容量会不够的。
(好像篇幅有点长,,扯得有点多了)

关于动态组件

这一块简单说一下,如果有不懂的,可以留言,我会把我知道的说出来,我这一块做的主要是<components :is="xxx">配合vuex,来做的。
前端页面改成上述模式,具体的组件排列顺序由后台传过来,比如说请求接口的时候,告诉它这是在D页面,并且把相应的机构号6传过去,后台传给我一个组件数组,moduleList:['2', '1', '3', '4'],然后我前端的<components :is="item" v-for="(item, index) in moduleList" :key="index">会按照moduleList里的组件顺序来动态渲染组件,之前一些父子组件传数据,在这里就变得不太适用了,所以这里的数据改用vuex存储。考虑到vuex在刷新数据丢失的问题,部分比较重要的,不想重新请求的,改用sessionStorage存储。

关于多入口多出口

其实就是最开始的项目入口是App.vuemain.js,打包出来的出入口是index.html,然后现在增加了两个,我这边是增加了genneral.js和genneral.html以及single.jssingle.html

1.首先要更改vue-cli生成的webpack里的参数,声明一下我这个版本的webpack版本还是2.6.x的,比较老了,现在应该都到4.x.x了吧。

vue 如何从单页应用改造成多页应用

PS:路由和store记得要各自独立,因为我这里的vuex很少只涉及一两个模块。并且仅仅是传递数据之类的,所以这里没有做成独立的。

2.修改build/webpack.base.conf.js

vue 如何从单页应用改造成多页应用

3.修改 build/webpack.dev.conf.js

vue 如何从单页应用改造成多页应用

4.修改 build/webpack.prod.conf.js

vue 如何从单页应用改造成多页应用

vue 如何从单页应用改造成多页应用

5.修改 config/index.js

vue 如何从单页应用改造成多页应用

理一下对应关系

main.js ==> App.vue ==> router/index.js A项目
general.js ==> general.vue ==> router/general.js B项目
single.js ==> single.vue ==> router/single.js C项目

部署的时候分三个不同的url

xxxxx/index.html对应A项目
xxxxx/general.html 对应B项目
xxxxx/single.html对应C项目

至于页面中的差异,我是通过v-if来控制,A项目的D页面是否有顶部tab,B项目的D页面是否有底部footer
因为这些页面大致是一样,仅有部分微调。所以改成用v-if来控制。

写了一个demo,方便大家看,仅仅是改了webpack的配置而已,戳这里

以上就是vue 如何从单页应用改造成多页应用的详细内容,更多关于vue 单页改多页的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
YUI模块开发原理详解
Nov 18 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 #Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
vue项目配置同一局域网可使用ip访问的操作
Oct 23 #Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 #Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 #Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 #Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 #Javascript
You might like
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
php实现socket推送技术的示例
2017/12/20 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python SQLite3简介
2018/02/22 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python实现windows下文件备份脚本
2018/05/27 Python
python版飞机大战代码分享
2018/11/20 Python
Python匿名函数及应用示例
2019/04/09 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
python入门之基础语法学习笔记
2020/02/08 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
你对IPv6了解程度
2016/02/09 面试题
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
干部现实表现材料
2014/02/13 职场文书
企业承诺书格式范文
2015/04/28 职场文书
文艺晚会开场白
2015/05/29 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
Python中第三方库Faker的使用详解
2022/04/02 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js