vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接(pages)
當(dāng)Vue項(xiàng)目完成后,在根目錄下打開(kāi)命令行,輸入命令:
npm run build
實(shí)際上此命令就是執(zhí)行build.js文件,將項(xiàng)目打包成靜態(tài)資源。
此命令完成后,項(xiàng)目根目錄下會(huì)多出一個(gè)dist文件夾,dist文件里面有:
static文件下包括項(xiàng)目打包后的css、js、img、fonts(字體圖標(biāo))。
項(xiàng)目資源無(wú)法加載
點(diǎn)擊index.html,瀏覽器顯示該頁(yè)面是空白的。打開(kāi)控制臺(tái)看到index.html文件中沒(méi)有加載任何css、js文件。
解決方法:
打開(kāi)項(xiàng)目根目錄config下的index.js文件,進(jìn)行如下修改:
將 assetsPublicPath: ‘/‘ ,改為 assetsPublicPath: ‘./‘ ,
保存后重新 npm run build
,在新生成的dist目錄下點(diǎn)開(kāi)index.html,這時(shí)頁(yè)面結(jié)構(gòu)正常顯示出來(lái)了,但是頁(yè)面字體圖標(biāo)和mock的數(shù)據(jù)無(wú)法正常加載。
字體圖標(biāo)無(wú)法加載
頁(yè)面中用background加載的圖片可以正常顯示,但是所有的字體圖標(biāo)都不能正常顯示,解決方法:打開(kāi)根目錄下build中的 utils.js 文件,在控制build樣式文件代碼中添加 publicPath: ‘../../‘ ,如下:
保存后,依舊重新'npm run build'
,打開(kāi)dist目錄下的index.js可以看到字體圖標(biāo)正常顯示了。
這里為什么需要這樣修改,可以參考 https://github.com/vuejs-temp... 。
Mock數(shù)據(jù)無(wú)法正常加載(我的做法是把模擬的json數(shù)據(jù)放到cdn上,跳過(guò)這一步)
此項(xiàng)目的絕大部分頁(yè)面內(nèi)容是通過(guò)在跟目錄下創(chuàng)建的data.json文件渲染到頁(yè)面上的,是模擬從后端請(qǐng)求數(shù)據(jù)的,開(kāi)發(fā)調(diào)試時(shí)用'npm run dev'
命令,會(huì)借助node啟動(dòng)一個(gè)本地服務(wù)器,可以正常的渲染出相應(yīng)的數(shù)據(jù)。而通過(guò)打包后的項(xiàng)目時(shí)屬于靜態(tài)資源的,點(diǎn)擊index.html查看項(xiàng)目,是無(wú)法加載mock的數(shù)據(jù)的,瀏覽器也會(huì)報(bào)跨域的錯(cuò)誤。若想正常的加載mock數(shù)據(jù),最好的方式是講打包后的資源丟到服務(wù)器中,或者使用jsonp請(qǐng)求線上真實(shí)數(shù)據(jù),因?yàn)樗脑硎抢胹cript標(biāo)簽來(lái)獲得數(shù)據(jù),在github上是可以預(yù)覽到的。
如何在github上預(yù)覽網(wǎng)頁(yè)效果:
settings—github pages—選擇“master branch”和“save”—刷新—再次找到“github pages”復(fù)制底下的鏈接—返回點(diǎn)擊倉(cāng)庫(kù)名—點(diǎn)擊edit—粘貼到框框內(nèi),一定要記住添加文件名及其后綴比如index.html—save.別人就可以通過(guò)這個(gè)鏈接訪問(wèn)你的網(wǎng)頁(yè)。
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接(pages),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式
這篇文章主要給大家介紹了關(guān)于vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03項(xiàng)目開(kāi)發(fā)中husky的使用詳解
這篇文章主要為大家介紹了項(xiàng)目開(kāi)發(fā)中husky的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Vue-Jest 自動(dòng)化測(cè)試基礎(chǔ)配置詳解
目前開(kāi)發(fā)大型應(yīng)用,測(cè)試是一個(gè)非常重要的環(huán)節(jié),而在 Vue 項(xiàng)目中做單元測(cè)試可以用 Jest,本文主要介紹了Vue-Jest 自動(dòng)化測(cè)試,感興趣的可以了解一下2021-07-07webpack4+express+mongodb+vue實(shí)現(xiàn)增刪改查的示例
這篇文章主要介紹了webpack4+express+mongodb+vue 實(shí)現(xiàn)增刪改查的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11使用this.$nextTick()獲取不到數(shù)據(jù)更新后的this.$refs.xxx.及場(chǎng)景分析
今天遇到了這樣一個(gè)場(chǎng)景,在數(shù)據(jù)更新之后,使用this.$nextTick(()=>{console.log(this.$refs.xxx)}) 獲取不到改dom,但是用setTimeout能夠獲取到,在此記錄一下,感興趣的朋友跟隨小編一起看看吧2023-02-02Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能,倒計(jì)時(shí)這要運(yùn)用在創(chuàng)建訂單后15分鐘內(nèi)進(jìn)行支付,否則訂單取消,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-08-08elementui?el-select?change事件傳參問(wèn)題
這篇文章主要介紹了elementui?el-select?change事件傳參問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01electron?vue?模仿qq登錄界面功能實(shí)現(xiàn)
這篇文章主要介紹了electron?vue?模仿qq登錄界面,首先使用vuecli創(chuàng)建vue項(xiàng)目,安裝electron,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08