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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 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 DOS攻击实现代码(附如何防范)
2012/05/29 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
python多线程用法实例详解
2015/01/15 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python爬取网易云音乐评论
2018/11/16 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
拾金不昧的表扬信
2014/01/16 职场文书
药品促销活动方案
2014/02/14 职场文书
房地产端午节活动方案
2014/08/24 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
评先进个人材料
2014/12/29 职场文书
护士自荐信怎么写
2015/03/06 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Spring中bean集合注入的方法详解
2022/07/07 Java/Android