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

vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接(pages)

 更新時(shí)間:2019年04月19日 11:28:51   作者:secret  
這篇文章主要介紹了vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接(pages)的相關(guān)資料,需要的朋友可以參考下

當(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í)間格式

    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的使用詳解

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

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

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

    Vue-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-07
  • webpack4+express+mongodb+vue實(shí)現(xiàn)增刪改查的示例

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

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

    vue中引用阿里字體圖標(biāo)的方法

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

    使用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-02
  • Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能

    Vue實(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-08
  • elementui?el-select?change事件傳參問(wèn)題

    elementui?el-select?change事件傳參問(wèn)題

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

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

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

最新評(píng)論