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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
Angularjs过滤器使用详解
May 25 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
手机端转换rem适应
Apr 01 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 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
mysq GBKl乱码
2006/11/28 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
国际贸易个人求职信范文
2014/01/04 职场文书
单位提档介绍信
2014/01/17 职场文书
村长贪污检举信
2014/04/04 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
mysql 获取时间方式
2022/03/20 MySQL