基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程詳解
官方提供的項(xiàng)目生成工具vue-cli沒(méi)有對(duì)多頁(yè)面webApp的支持,但是在實(shí)際的項(xiàng)目中,我們需要這樣的腳手架,參考了很多大牛的方法,這里提供了一種我的單頁(yè)面腳手架轉(zhuǎn)換為多頁(yè)面腳手架的方案,供大家參考。不好的地方也請(qǐng)大家指正。
準(zhǔn)備
使用vue-cli生成一個(gè)你需要的單頁(yè)面項(xiàng)目腳手架,然后我們就要開(kāi)始我們的改裝工程了。
重構(gòu)過(guò)程
步驟一 改變目錄結(jié)構(gòu)
- step1 在src目錄下面新建views文件夾,然后再views文件夾下新建index文件夾
- step2 將src目錄下的main.js和App.vue移動(dòng)到step1中的index文件夾下,并將main.js重命名為index.js
- step3 將src目錄下的router文件夾移動(dòng)到step1中的index文件夾下,如果不使用router可以再index.js中注釋掉,我沒(méi)有使用,因?yàn)槲业拿總€(gè)頁(yè)面不是單頁(yè)面的應(yīng)用,不必要使用路由功能
- step4 將根目錄下的index.html文件移動(dòng)到step1中的index文件夾下
步驟二 修改build下的配置文件
在生產(chǎn)環(huán)境下會(huì)分頁(yè)面打包獨(dú)有js文件,并抽取公共js,不會(huì)什么都打包成一坨。打包后文件目錄結(jié)構(gòu)也是比較清晰地。一下所有修改都在build文件夾下
step1 修改utils.js,增加兩個(gè)函數(shù),一個(gè)用來(lái)獲取頁(yè)面多入口,一個(gè)用來(lái)輸入打包后的頁(yè)面,并注入js:
var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/views')
var merge = require('webpack-merge')
//多入口配置
//獲取views文件夾下,每個(gè)頁(yè)面下的index.js作為頁(yè)面入口,故每個(gè)頁(yè)面下都必須有index.js
exports.entries = function() {
var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
var map = {}, tmp = [], pathname = '';
entryFiles.forEach((filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
tmp = filePath.split('/').splice(-4)
map[tmp[2] + '/' + filename] = filePath
})
return map
}
//多頁(yè)面輸出配置
//讀取views文件夾下的對(duì)應(yīng)每個(gè)頁(yè)面的html后綴文件,然后放入數(shù)組中
//如果想要更深的定制或者修改,建議大家看一下CommonsChunkPlugin
//推薦一個(gè)基礎(chǔ)的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let arr = []
entryHtml.forEach((filePath) => {
let jsPath = '', tmp = [];
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
tmp = filePath.split('/').splice(-4)
jsPath = tmp[2] + '/' + 'index'
let conf = {
template: filePath,
filename: filename + '.html',
chunks: ['manifest', 'vendors', jsPath],
inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}
step2 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: './src/main.js'
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代碼,將其注釋掉:
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
在plugins這個(gè)屬性值的后面加上我們上面的方法,下面是代碼片段:
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
new FriendlyErrorsPlugin()
].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.js 找到下面的代碼,注釋掉:
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
在plugins這個(gè)屬性值的后面加上我們上面的方法,下面是代碼片段:
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}])
].concat(utils.htmlPlugin())
配置完成。正常啟動(dòng)項(xiàng)目即可。
總結(jié)
以上所述是小編給大家介紹的基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
原生JS實(shí)現(xiàn)Vue transition fade過(guò)渡動(dòng)畫(huà)效果示例
這篇文章主要為大家介紹了原生JS實(shí)現(xiàn)Vue transition fade過(guò)渡動(dòng)畫(huà)效果示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
element plus tree拖動(dòng)節(jié)點(diǎn)交換位置和改變層級(jí)問(wèn)題(解決方案)
圖層list里有各種組件,用element plus的tree來(lái)渲染,可以把圖片等組件到面板里,面板是容器,非容器組件,比如圖片、文本等,就不能讓其他組件拖進(jìn)來(lái),這篇文章主要介紹了element plus tree拖動(dòng)節(jié)點(diǎn)交換位置和改變層級(jí)問(wèn)題(解決方案),需要的朋友可以參考下2024-04-04
vue3結(jié)合hooks開(kāi)發(fā)可以注冊(cè)的二次確認(rèn)彈框
這篇文章主要為大家介紹了vue3結(jié)合hooks開(kāi)發(fā)可以注冊(cè)的二次確認(rèn)彈框,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
vue實(shí)現(xiàn)一拉到底的滑動(dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)單的一拉到底的滑動(dòng)驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
vue實(shí)現(xiàn)在頁(yè)面上添加水印的示例代碼
這篇文章主要給大家介紹一下vue實(shí)現(xiàn)在頁(yè)面上添加水印的實(shí)例,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-12-12
antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)
這篇文章主要介紹了antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02

