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