這篇文章將為大家詳細(xì)講解有關(guān)怎樣搭建vue.js多頁面開發(fā)環(huán)境,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),珠山企業(yè)網(wǎng)站建設(shè),珠山品牌網(wǎng)站建設(shè),網(wǎng)站定制,珠山網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,珠山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
利用 vue-cli 搭建的項(xiàng)目大都是單頁面應(yīng)用項(xiàng)目,對(duì)于簡(jiǎn)單的項(xiàng)目,單頁面就能滿足要求。但對(duì)于有多個(gè)子項(xiàng)目的應(yīng)用,如果創(chuàng)建多個(gè)單頁面,顯示有點(diǎn)重復(fù),特別是 node_modules 會(huì)有多份相同的。如果全部放到單頁面項(xiàng)目下,又顯得有點(diǎn)亂,這時(shí)候通過改造 vue-cli 搭建的項(xiàng)目為多頁面,就是一個(gè)比較好的解決方法。
如何改造單頁面 vue.js 項(xiàng)目為多頁面項(xiàng)目?下面是這次改造的具體過程。
一、創(chuàng)建單頁面 vue.js 項(xiàng)目
這里直接使用官方提供的腳手架 vue-cli3 創(chuàng)建,具體的過程請(qǐng)參考「vue-cli3.0 升級(jí)記錄」
二、多頁面配置
1、添加配置文件
在項(xiàng)目根路徑下( 與 package.json 同目錄 )添加 vue.config.js,內(nèi)容如下:
module.exports = { pages: { index: { // 入口js的路徑 entry: './src/main', // 頁面模板路徑 template: './src/public/index.html' } } }
上面的配置其實(shí)就是 vue-cli 建立項(xiàng)目的默認(rèn)配置,如果增加頁面,在 pages 節(jié)點(diǎn)下添加配置即可。但這種方式,每次增加一個(gè)新頁面,就需要手動(dòng)添加節(jié)點(diǎn),這種重復(fù)的事情顯然不智能。下面繼續(xù)改造。
2、調(diào)整項(xiàng)目結(jié)構(gòu)
要自動(dòng)化,那么就需要按定一種規(guī)則把頁面組織下。如把所有路由頁面都放到 src/pages 目錄下,改造后的結(jié)構(gòu)如下:
3、編寫自動(dòng)配置文件
在項(xiàng)目根路徑下( 與 package.json 同目錄 )添加 vue.util.js,內(nèi)容如下:
const path = require('path') const glob = require('glob') const START_PATH = '/src/pages/' const PAGE_PATH = path.resolve(__dirname, '.' + START_PATH) exports.pages = function () { var entryFiles = glob.sync(PAGE_PATH + '/**/*.html') var obj = {} entryFiles.forEach((filePath) => { var dirPath = filePath.substring(0, filePath.lastIndexOf('/')) var dirName = dirPath.substring(dirPath.lastIndexOf('/') + 1) var filename = filePath.substring(filePath.lastIndexOf(START_PATH) + START_PATH.length, filePath.lastIndexOf('/')) if (filename.endsWith(dirName)) { obj[filename] = { entry: filePath.substring(0, filePath.lastIndexOf('.html')) + '.js', template: filePath.substring(0, filePath.lastIndexOf('.html')) + '.html' } } }) return obj }
在 vue.config.js 使用上面的配置
const utils = require('./vue.util') module.exports = { pages: utils.pages() }
三、測(cè)試下
yarn dev
瀏覽器輸入:
http://localhost:8080/index.html 和 http://localhost:8080/index2.html
OK,多頁面配置完成
關(guān)于“怎樣搭建vue.js多頁面開發(fā)環(huán)境”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
網(wǎng)頁題目:怎樣搭建vue.js多頁面開發(fā)環(huán)境
分享地址:http://muchs.cn/article30/geecso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)公司、服務(wù)器托管、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)