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 事件流和事件绑定
Jul 16 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
vue 二维码长按保存和复制内容操作
Sep 22 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
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php删除指定目录的方法
2015/04/03 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
php session_decode函数用法讲解
2019/05/26 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
详解JS面向对象编程
2016/01/24 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Python实现二维数组输出为图片
2018/04/03 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
大学生暑期实践感言
2014/02/26 职场文书
给校长的一封检讨书
2014/09/20 职场文书
贪污检举信范文
2015/03/02 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
离婚起诉书范本
2015/05/18 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
SQL Server中的游标介绍
2022/05/20 SQL Server