溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用自己基于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文件,多頁構建的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
