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

最近接到这样一个需求，将之前的三个项目合并成一个，并且要做成后台可配置化，前端动态引入组件的模板化框架。
听起来是不是很拗口。。。我自己当时都蒙了。
简单分析下需求，就是，项目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.vue和main.js，打包出来的出入口是index.html，然后现在增加了两个，我这边是增加了genneral.js和genneral.html以及single.js和single.html。

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

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

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

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

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

5.修改 config/index.js

理一下对应关系

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 单页改多页的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 手把手教你vue-cli单页到多页应用的方法

    vue-cli到多页应用 前言:我有一个cli创建的vue项目,但是我想做成多页应用,怎么办,废话不多说,直接开撸~ 约定:新增代码部分在//add和//end中间 删除(注释)代码部分在//del和//end中间,很多东西都写在注释里 第一步:cli一个vue项目 新建一个vue项目 官网 vue init webpack demo cli默认使用webpack的dev-server服务,这个服务是做不了单页的,需要手动建一个私服叫啥你随意 一般叫dev.server或者dev.client

  • webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法

    批处理 前端现在在做项目的时候大多数遇到的都是单页面应用,但有时需要做多页面的时候,会把单页拿过来修改成多页面,如果代码多了,对单页或多页的配置可能会混乱,那么有没有更好的方式能把单页面和多页面不同的配置代码分开,能更清楚的分辩他们的区别,这里是利用 批处理 对前端构建进行部署 git地址目录分为三块 single //单页代码 share // 共用代码 many //多页代码 只需要用到 批处理 对其中两者进行合并就能生成想要的单页或多页应用,提示需要安装国内的 npm淘宝镜像 如果未安装的

  • 详解vue-cli3多页应用改造

    需求 一个平台P,包含产品a.b.c.d.e.各产品UI样式风格统一,且会用到公共配置(HOST.是否添加埋点js).组件(头部导航.表格.搜索框).方法(请求拦截.生成UUID). 现状:由于历史遗留原因,各产品为独立SPA.各自维护,配置.组件也都自成一体,只是大概样式上保持了一致,但细节(比如同一面包屑样式,左边距5px.8px都有)都不一致. 这种情况下,改组件.改配置都得一改改多个地方,且有些项目是vue-cli2.有些是vue-cli3,项目间依赖包的版本也不一致,维护起来非常不友好

  • Vue单页及多页应用全局配置404页面实践记录

    前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口.下面我们用作例子的两个项目,均采用vue作为基础框架,一个是SPA应用,另一个是多页应用,均由前端进行路由控制及渲染的. 总体思路 无论单页还是多页,我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由,渲染相应的404页面.同时,配置一个规则,当在用户可访问的路由表中的所有路由都无法匹配的时候,自动跳转重定向至该404页面.下面来说一下针对单页和多页

  • vue 单页应用和多页应用的优劣

    多页应用 每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用. 为什么多页应用的首屏时间快? 首屏时间叫做页面首个屏幕的内容展现的时间,当我们访问页面的时候,服务器返回一个html,页面就会展示出来,这个过程只经历了一个HTTP请求,所以页面展示的速度非常快. 为什么搜索引擎优化效果好(SEO)? 搜索引擎在做网页排名的时候,要根据网页内容才能给网页权重,来进行网页的排名.搜索引擎是可以识别html内容的,而我们每个页面所有的内容都放在H

  • 详解如何使用 vue-cli 开发多页应用

    本文介绍了如何使用 vue-cli 开发多页应用,分享给大家,具体如下: 修改的webpack配置文件 全局配置 修改 webpack.base.conf.js 打开 ~\build\webpack.base.conf.js ,找到entry,添加多入口 entry: { app: './src/main.js', app2: './src/main2.js', app3: './src/main3.js', }, 运行.编译的时候每一个入口都会对应一个Chunk run dev 开发环境 修改

  • vue-cli单页应用改成多页应用配置详解

    vue-cli单页应用改成多页应用配置详解

    前言 从接触vue开始用的是vue-cli直接搭建单页应用,参考配合着vue-router开发起来简直爽到吊炸天,但是由于项目越来越复杂了,单页用起来可能有点力不从心,能不能弄成多页面呢,查了相关资料得到的结论是完全可以的,能多页面多入口,并且可以使用组件,还引入jQuery,这简直完美了,这个demo是从我已经改造完成的项目中摘出来的,现在演示下怎么把基于vue2的vue-cli单页模板改造成多页面,并且多入口的项目. 技术栈 vue: 2.0.1 vue-resource:1.0.3 vue

  • 详解Vue CLI3 多页应用实践和源码设计

    对于一个网站来说,即需要h5页面也同时需要web页面,而h5和web页面共用很多代码,不做响应式,只能拆分两个页面来写,一个h5,一个web.用vue cli3怎么配置h5与web的应用呢? 解决思路: 首先,需要产生多页面应用,用webpack配置成多页面应用,一个h5一个web,这个网上已经有很多教程了,下面会再整理一次,接着把所有公共的代码提到多页面目录外面. 我们看一下官网给的 multi-page 的配置:需要在 vue.config.js 配置 pages,示例如下: pages:

  • Vue CLI3基础学习之pages构建多页应用

    Vue CLI3基础学习之pages构建多页应用

    前言 首先我们可以把多页应用理解为由多个单页构成的应用,而何谓多个单页呢?其实你可以把一个单页看成是一个 html 文件,那么多个单页便是多个 html 文件,多页应用便是由多个 html 组成的应用,如下图所示 既然多页应用拥有多个 html ,那么同样其应该拥有多个独立的入口文件.组件.路由. vuex 等.没错,说简单一点就是多页应用的每个单页都可以拥有单页应用 src 目录下的文件及功能,我们来看一下一个基础多页应用的目录结构 ├── node_modules              

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

    最近接到这样一个需求,将之前的三个项目合并成一个,并且要做成后台可配置化,前端动态引入组件的模板化框架. 听起来是不是很拗口...我自己当时都蒙了. 简单分析下需求,就是,项目A/B/C的内容是交叉的,有的页面不同,有的页面和组件是公用的,例如A项目多了个人中心及其里面所有内容(最全的一个项目,但是是放在微信中的,需要获取微信授权),B项目是通用版的项目(也就是说可以放在微信,也可以放在app内,不需要获取授权之类的.),C项目是A/B项目中共有的一个页面功能抽取出来了. 所以有的时候比如说这块

  • vue将单页面改造成多页面应用的方法

    问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用.项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验.我想要的效果是,查看页面只加载查看页面的代码,不包含管理系统的代码,因此着手将单页面应用改造成多页面应用,这里分享下方法. 1.改造文件目录 改造前: 改造后: assets:这里不变,依然放置公用的静态资源文件:components:这里存放应用下所有的vue组件:pages:这里存放我们的多页面

  • 多页vue应用的单页面打包方法(内含打包模式的应用)

    一.简介 关于如何以及为什么要构建多页vue应用,我们在上一篇文章中已经介绍过,感兴趣的请参考构建多页vue应用.本文我们要介绍的是,对于一个多页应用,如何单独打包其中一个(或几个)页面. 一般来说,多页应用不需要打包单个页面,这多个页面可以作为整个应用直接放在静态资源服务器上.不过我们也说过,多页应用的每个页面也可能会放在不同的服务器上,这时候如果往每个服务器上都放置完整的资源包,就会显得过于臃肿.于是我们可能就需要将某个页面单独打包出来. 诚然,有一个很明显的方法,就是在每次打包的时候直接删

  • Ant Design Vue 走马灯实现单页多张图片轮播效果

    Ant Design Vue 走马灯实现单页多张图片轮播效果

    最近的项目有个需求是,这种单页多图一次滚动一张图片的轮播效果,项目组件库是antd 然而用了antd的走马灯是这样子的 我们可以看到官网给的api是没有这种功能,百度上也多是在css上动刀,那样也就毕竟繁琐了,我们是什么?我们是程序猿啊,程序猿就该有程序猿的样子,怎么能写繁琐的东西呢,那还怎么为公司项目提高效率!!!(我哪敢说是为了摸鱼啊) 为了追求摸鱼的真谛我仔细查阅了文档https://github.com/vueComponent/ant-design-vue/blob/master/co

  • vue.js表单验证插件(vee-validate)的使用教程详解

    vue.js表单验证插件(vee-validate)的使用教程详解

    综述 名称:vee-validate 用途:简单的 Vue.js 表单验证插件 官网:地址 github:地址 特别提示 配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面,通用性强 安装 单页安装 npm install vee-validate --save 浏览器安装 <!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.0-rc.

  • Vue form 表单提交+ajax异步请求+分页效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-

  • vue中SPA单页面应用程序详解

    一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中. SPA的工作原理: eg:  http://127.0.0.1/index.html#/start ①根据地址栏中url解析完整的页面:index.html 加载index.html ②根据地址栏中url解析#后的路由地址: start 根据路由地址,去在当前应用的配置中 找该路由地址的配置

  • element 结合vue 在表单验证时有值却提示错误的解决办法

    绑定的值与规则指定的值一定要相同------- 第一步: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 加上rules ref 第二部: <el-form-item label="活动名称" prop="na

  • vue自动路由-单页面项目（非build时构建）

    这是一个什么项目? 答:这是一个单页面的vue.js项目,主要为了实现在非build时,进行自动路由.简单点说,就是在请求页面时,根据url进行动态添加路由. 自动路由有什么限制吗? 答:有,因为是通过url进行动态添加,所以,在指定文件夹下,组件文件的相对路径必须与url有一定的关系.当前demo项目,url路径与modules文件夹下的组件相对路径一致.例如: url地址:localhost:5000/home/index 组件路径:modules/home/index/index.vue

随机推荐