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 相关文章推荐
动态加载jquery库的方法
Feb 12 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
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 输出双引号"与单引号'的方法
2010/05/09 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
文字幻灯片
2006/06/26 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
python实现class对象转换成json/字典的方法
2016/03/11 Python
python实现反转部分单向链表
2018/09/27 Python
Django forms组件的使用教程
2018/10/08 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
keras多显卡训练方式
2020/06/10 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
学校元旦晚会方案
2014/02/19 职场文书
借款协议书范本
2014/04/22 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
详解Vue slot插槽
2021/11/20 Vue.js