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 相关文章推荐
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
在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
PHP中的float类型使用说明
2010/07/27 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
python中对list去重的多种方法
2014/09/18 Python
python取代netcat过程分析
2018/02/10 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
如何基于python实现归一化处理
2020/01/20 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
自我介绍演讲稿范文
2014/08/21 职场文书
二手房购房协议书范本
2014/10/05 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python