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 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
微信小程序云开发之模拟后台增删改查
May 16 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
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python如何在循环引用中管理内存
2018/03/20 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
电子商务专业自我鉴定
2013/12/18 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
财务内勤岗位职责
2014/04/17 职场文书
市政管理求职信范文
2014/05/07 职场文书
世界环境日活动总结
2015/02/11 职场文书
团员个人年度总结
2015/02/26 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
如何书写授权委托书?
2019/06/25 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
使用pandas模块实现数据的标准化操作
2021/05/14 Python