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


Posted in Javascript onNovember 25, 2018

问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用。项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验。我想要的效果是,查看页面只加载查看页面的代码,不包含管理系统的代码,因此着手将单页面应用改造成多页面应用,这里分享下方法。

1、改造文件目录

改造前:

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

改造后:

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

assets:这里不变,依然放置公用的静态资源文件;components:这里存放应用下所有的vue组件;pages:这里存放我们的多页面,比如我把管理系统页面放在index中,查看页面放在view中;

pages文件:

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

每个页面下必须包含的文件是 html/js/vue,是文件入口,如果该页面下包含路由,状态管理,接口请求也放在该目录下;

2、打包配置文件修改

我们最后的打包文件是这样的,可以看到有2个html,包括资源也分开了。这是通过修改webpack配置改造的。采用的方法也是网上比较推荐的方法.
HTML分离:
vue将单页面改造成多页面应用的方法

资源分离:
vue将单页面改造成多页面应用的方法

2.1 修改build->utils.js

修改build文件夹下的utils.js,直接将下面的代码复制在后面即可。

var glob = require('glob');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var PAGE_PATH = path.resolve(__dirname, '../src/pages');
var merge = require('webpack-merge');
// 这段代码的意思是根据我们`pages`下的文件夹定义webpack的入口:
exports.entries = function () {
 var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
 var map = {}
 entryFiles.forEach((filePath) => {
   var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
   map[filename] = filePath
 })
 return map
}
// 这段代码是将生成的html,加载对应的资源文件
exports.htmlPlugin = function () {
 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
 let arr = []
 entryHtml.forEach((filePath) => {
   let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
   let conf = {
     // 模板来源
     template: filePath,
     // 文件名称
     filename: filename + '.html',
     // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本
     chunks: ['manifest', 'vendor', filename],
     inject: true
   }
   if (process.env.NODE_ENV === 'production') {
     conf = merge(conf, {
       minify: {
         removeComments: true, 
         collapseWhitespace: true,
         removeAttributeQuotes: true
       },
       chunksSortMode: 'dependency'
     })
   }
   arr.push(new HtmlWebpackPlugin(conf))
 })
 return arr
}

2.2 修改入口entry打开 build->webpack.base.conf.js,替换entry为在utils新增的entries

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

2.3 修改html插件打开build->webpack.prod.conf.js,先去除原来的配置:

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

然后再把我们刚在utils里新增的配置加上:

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

3、页面怎么写

上面的方法,网上五花八门的都介绍了,但是在实现的过程中,还是遇到了问题:这里粘贴下我实践成功的页面写法,减少一些爬坑吧~

view.html

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

view.vue

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

view.js

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

ok,这时候 npm run build 就可以打包出我们要的文件了,访问方法是直接输入对应的html,如果是管理首页,无需写index.html,比如本地访问查看页面:

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

4、进一步优化

这个时候我们又发现一个问题,就是我的查看页面很简单,没有引入状态管理,路由,UI框架,但是我们知道vue的webpack把这些第三方公共组件都打包到render.js里面了且文件很大会影响我们的加载速度。这里我是将比较大的第三方库使用了cdn方法加载,实践证明会减少了一半的加载速度,且压缩后的js代码也小了很多了~

Javascript 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
Table冻结表头示例代码
Aug 20 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
layui分页效果实现代码
May 19 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 #Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 #Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 #Javascript
详解js静态检查工具eslint配置文件
Nov 23 #Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 #Javascript
创建echart多个联动的示例代码
Nov 23 #Javascript
详解Angular模板引用变量及其作用域
Nov 23 #Javascript
You might like
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
PHP7 新增常量
2021/03/09 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
vuejs指令详解
2017/02/07 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
Python列表推导式的使用方法
2013/11/21 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python 进程的几种创建方式详解
2019/08/29 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
办护照工作证明范本
2014/01/14 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
留学经费担保书
2014/05/12 职场文书
工程索赔意向书
2014/08/30 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
质量保证书怎么写
2015/02/27 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
亲情作文之母爱
2019/09/25 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
详解Python中的for循环
2022/04/30 Python