欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項目打包上傳github并制作預覽鏈接(pages)

 更新時間:2019年04月19日 11:28:51   作者:secret  
這篇文章主要介紹了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)站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • vue如何使用moment處理時間戳轉換成日期或時間格式

    vue如何使用moment處理時間戳轉換成日期或時間格式

    這篇文章主要給大家介紹了關于vue如何使用moment處理時間戳轉換成日期或時間格式的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者vue具有一定的參考學習價值,需要的朋友可以參考下
    2022-03-03
  • 項目開發(fā)中husky的使用詳解

    項目開發(fā)中husky的使用詳解

    這篇文章主要為大家介紹了項目開發(fā)中husky的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • Vue中Quill富文本編輯器的使用教程

    Vue中Quill富文本編輯器的使用教程

    這篇文章主要介紹了Vue中Quill富文本編輯器的使用教程,包括自定義工具欄、自定義字體選項、圖片拖拽上傳、圖片改變大小等使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-09-09
  • Vue-Jest 自動化測試基礎配置詳解

    Vue-Jest 自動化測試基礎配置詳解

    目前開發(fā)大型應用,測試是一個非常重要的環(huán)節(jié),而在 Vue 項目中做單元測試可以用 Jest,本文主要介紹了Vue-Jest 自動化測試,感興趣的可以了解一下
    2021-07-07
  • webpack4+express+mongodb+vue實現(xiàn)增刪改查的示例

    webpack4+express+mongodb+vue實現(xiàn)增刪改查的示例

    這篇文章主要介紹了webpack4+express+mongodb+vue 實現(xiàn)增刪改查的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue中引用阿里字體圖標的方法

    vue中引用阿里字體圖標的方法

    這篇文章主要介紹了vue中引用阿里字體圖標出現(xiàn)錯誤問題的解決方法,感興趣的朋友跟隨腳本之家小編一起學習吧
    2018-02-02
  • 使用this.$nextTick()獲取不到數(shù)據(jù)更新后的this.$refs.xxx.及場景分析

    使用this.$nextTick()獲取不到數(shù)據(jù)更新后的this.$refs.xxx.及場景分析

    今天遇到了這樣一個場景,在數(shù)據(jù)更新之后,使用this.$nextTick(()=>{console.log(this.$refs.xxx)}) 獲取不到改dom,但是用setTimeout能夠獲取到,在此記錄一下,感興趣的朋友跟隨小編一起看看吧
    2023-02-02
  • Vue實現(xiàn)訂單支付倒計時功能

    Vue實現(xiàn)訂單支付倒計時功能

    這篇文章主要給大家介紹了Vue實現(xiàn)訂單支付倒計時功能,倒計時這要運用在創(chuàng)建訂單后15分鐘內(nèi)進行支付,否則訂單取消,本文結合示例代碼給大家詳細講解,需要的朋友可以參考下
    2023-08-08
  • elementui?el-select?change事件傳參問題

    elementui?el-select?change事件傳參問題

    這篇文章主要介紹了elementui?el-select?change事件傳參問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • electron?vue?模仿qq登錄界面功能實現(xiàn)

    electron?vue?模仿qq登錄界面功能實現(xiàn)

    這篇文章主要介紹了electron?vue?模仿qq登錄界面,首先使用vuecli創(chuàng)建vue項目,安裝electron,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08

最新評論