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 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
Vue计算属性的使用
Aug 04 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 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的sso单点登录实现方法
2015/01/08 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
简易js代码实现计算器操作
2013/04/15 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
原生js调用json方法总结
2018/02/22 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python简单文本处理的方法
2015/07/10 Python
Python三级目录展示的实现方法
2016/09/28 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python中按键来获取指定的值
2019/03/02 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python requests指定出口ip的例子
2019/07/25 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
django实现日志按日期分割
2020/05/21 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
图书室管理制度
2014/01/19 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android