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

這篇文章主要介紹“vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接的方法”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接的方法”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)建站是專業(yè)的臨桂網(wǎng)站建設(shè)公司，臨桂接單;提供網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行臨桂網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

當(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)頁。

關(guān)于“vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識點(diǎn)。

當(dāng)前文章：vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接的方法
鏈接地址：http://bm7419.com/article4/pcejie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站維護(hù)、服務(wù)器托管、企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)