基于vue cli重构多页面脚手架过程详解


Posted in Javascript onJanuary 23, 2018

官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考。不好的地方也请大家指正。

准备

使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了。

重构过程

步骤一 改变目录结构

  • step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹
  • step2 将src目录下的main.js和App.vue移动到step1中的index文件夹下,并将main.js重命名为index.js
  • step3 将src目录下的router文件夹移动到step1中的index文件夹下,如果不使用router可以再index.js中注释掉,我没有使用,因为我的每个页面不是单页面的应用,不必要使用路由功能
  • step4 将根目录下的index.html文件移动到step1中的index文件夹下

步骤二 修改build下的配置文件

在生产环境下会分页面打包独有js文件,并抽取公共js,不会什么都打包成一坨。打包后文件目录结构也是比较清晰地。一下所有修改都在build文件夹下

step1 修改utils.js,增加两个函数,一个用来获取页面多入口,一个用来输入打包后的页面,并注入js:

var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/views')
var merge = require('webpack-merge')
//多入口配置
//获取views文件夹下,每个页面下的index.js作为页面入口,故每个页面下都必须有index.js
exports.entries = function() {
 var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
 var map = {}, tmp = [], pathname = '';
 entryFiles.forEach((filePath) => {
 var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 map[tmp[2] + '/' + filename] = filePath
 })
 return map
}
//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件,然后放入数组中
//如果想要更深的定制或者修改,建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
 let arr = []
 entryHtml.forEach((filePath) => {
 let jsPath = '', tmp = [];
 let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 jsPath = tmp[2] + '/' + 'index'
 let conf = {
  template: filePath,
  filename: filename + '.html',
  chunks: ['manifest', 'vendors', jsPath],
  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
}
step2 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: './src/main.js'
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码,将其注释掉:
new HtmlWebpackPlugin({
 filename: 'index.html',
 template: 'index.html',
 inject: true
}),

在plugins这个属性值的后面加上我们上面的方法,下面是代码片段:

// new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 new FriendlyErrorsPlugin()
 ].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.js 找到下面的代码,注释掉:
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 // more options:
 // https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),

在plugins这个属性值的后面加上我们上面的方法,下面是代码片段:

new CopyWebpackPlugin([{
  from: path.resolve(__dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
 }])
 ].concat(utils.htmlPlugin())

配置完成。正常启动项目即可。

总结

以上所述是小编给大家介绍的基于vue cli重构多页面脚手架过程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
常用的javascript function代码
May 23 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
Json解析的方法小结
Jun 22 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 #Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 #Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 #Javascript
浅谈vue项目重构技术要点和总结
Jan 23 #Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 #Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 #Javascript
three.js 入门案例详解
Jan 23 #Javascript
You might like
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
iOS10推送通知开发教程
2016/09/19 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
js常用代码段整理
2011/11/30 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
致100米运动员广播稿
2014/02/14 职场文书
绩效管理实施方案
2014/03/19 职场文书
党员政治学习材料
2014/05/14 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python