vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
使用自己基于vue-cli2.X改造的前端多页脚手架有近1年多时间了，一直没机会升级3.0版本
开始零零碎碎开始写一些功能，顺便分享一下
constpath=require('path')
constglob=require('glob')
/**获取多页的入口脚本和模板*/
constgetPages=(()=>{
const[
globPathHtml,
globPathJs,
pages,
tempSet
]=[
['./src/modules/**/index.html','template'],//入口模板正则
['./src/modules/**/main.js','entry'],//入口脚本正则
Object.create(null),
newSet()
]
constgetMultiPageConf=(globPath,keyName)=>{
let[fileList,tempArr,modName]=[glob.sync(globPath),[],null]
if(fileList.length!==0){
for(letentryoffileList){
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)
}
}
returntrue
}else{
if(keyName==='template'){
thrownewError('无法获取多页入口模板')
}elseif(keyName==='entry'){
thrownewError('无法获取多页入口脚本')
}else{
thrownewError('无法获取多页信息')
}
}
}
try{
while(getMultiPageConf(...globPathHtml)&&getMultiPageConf(...globPathJs))returnpages
}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-cli3.0自定义vue.config.js文件,多页构建的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。