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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
JS实现简单抖动效果
Jun 01 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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
smarty实例教程
2006/11/19 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
Prototype String对象 学习
2009/07/19 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python中super函数的用法
2017/11/17 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Django实现发送邮件功能
2019/07/18 Python
python通过http下载文件的方法详解
2019/07/26 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
销售经理工作职责范文
2013/12/03 职场文书
驾驶员岗位职责
2014/01/29 职场文书
机动车登记业务委托书
2014/10/08 职场文书
责任书格式
2015/01/29 职场文书
留学推荐信英文范文
2015/03/26 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers