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