vue-cli 3.0 自定义vue.config.js文件,多页构建的方法


Posted in Javascript onSeptember 19, 2018

使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了,一直没机会升级3.0版本

开始零零碎碎开始写一些功能,顺便分享一下

const path = require('path')
const glob = require('glob')
/** 获取多页的入口脚本和模板 */
const getPages = (() => {
 const [
 globPathHtml,
 globPathJs,
 pages,
 tempSet
 ] = [
 ['./src/modules/**/index.html', 'template'], // 入口模板正则
 ['./src/modules/**/main.js', 'entry'], // 入口脚本正则
 Object.create(null),
 new Set()
 ]
 const getMultiPageConf = (globPath, keyName) => {
 let [fileList, tempArr, modName] = [glob.sync(globPath), [], null]
 if (fileList.length !== 0) {
  for (let entry of fileList) {
  tempArr = path.dirname(entry, path.extname(entry)).split('/')
  modName = tempArr[tempArr.length - 1]
  if (tempSet.has(modName)) {
   Object.assign(pages[modName], { [keyName]: entry, 'filename': `${modName}.html` })
  } else {
   Reflect.set(pages, modName, { [keyName]: entry }) && tempSet.add(modName)
  }
  }
  return true
 } else {
  if (keyName === 'template') {
  throw new Error('无法获取多页入口模板')
  } else if (keyName === 'entry') {
  throw new Error('无法获取多页入口脚本')
  } else {
  throw new Error('无法获取多页信息')
  }
 }
 }
 try {
 while (getMultiPageConf(...globPathHtml) && getMultiPageConf(...globPathJs)) return pages
 } catch (err) {
 console.log('获取多页数据错误:', err)
 }
})()
console.log('pages: ', getPages)

打印结果:

pages: { mod1:
 { template: './src/modules/mod1/index.html',
  entry: './src/modules/mod1/main.js',
  filename: 'mod1.html' },
 mod2:
 { template: './src/modules/mod2/index.html',
  entry: './src/modules/mod2/main.js',
  filename: 'mod2.html' },
 mod3:
 { template: './src/modules/mod3/index.html',
  entry: './src/modules/mod3/main.js',
  filename: 'mod3.html' } }

使用:

/** vue.config.js */
module.exports = {
 ...
 pages: getPages
 ...
}

以上这篇vue-cli 3.0 自定义vue.config.js文件,多页构建的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Array数组对象的扩展函数代码
May 22 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
javascript的函数作用域
Nov 12 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
vue.extend与vue.component的区别和联系
Sep 19 #Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 #Javascript
自己动手封装一个React Native多级联动
Sep 19 #Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 #Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 #Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 #Javascript
node.js环境搭建图文详解
Sep 19 #Javascript
You might like
YB217、YB235、YB400浅听
2021/03/02 无线电
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
详解express + mock让前后台并行开发
2018/06/06 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python栈类实例分析
2015/06/15 Python
对python sklearn one-hot编码详解
2018/07/10 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
客服服务心得体会
2013/12/30 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书