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 拖拉缩放效果
Dec 10 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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实现远程下载文件到本地
2015/05/17 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
jquery 常用操作方法
2010/01/28 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
汽车装潢店创业计划书范文
2014/02/05 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
见习报告的格式
2014/10/31 职场文书
学校安全管理制度
2015/08/06 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers