vue項目打包后上傳至GitHub，并實現github-pages的預覽

wangdai 發布于2019-08-23 17:17 / 696人閱讀

摘要：項目打包后上傳至，并實現的預覽打包項目項目命令行輸入打包命令，生成了文件夾打包完成。參考各位大佬求教一個問題項目打包后如何上傳到實現預覽上傳本地項目到和預覽使用數據怎么加載本地數據能讓項目在上預覽

vue項目打包后上傳至GitHub，并實現github-pages的預覽 1. 打包vue 項目

vue項目：

命令行輸入打包命令npm run build，生成了dist文件夾：

打包完成。

打包常見問題1——項目資源無法加載

打開剛剛打包好的dist文件夾，瀏覽器打開index.html

發現該頁面是空白的，打開控制臺發現

這里看到index.html文件中沒有加載任何css、js文件。

解決方法——修改config文件

打開項目根目錄config下的index.js文件，進行如下修改：

即將assetsPublicPath: "/"改成assetsPublicPath: "./"
重新npm run build

打包常見問題2——字體圖標無法加載

字體和圖標不能正常顯示

解決方法——修改build文件

打開根目錄下build中的utils.js文件，在控制build樣式文件代碼中添加　publicPath: "../../"，

添加publicPath: "../../"

重新npm run build

2. 上傳vue 項目并預覽

將項目提交至倉庫(包括dist目錄)，假如倉庫名稱為test.

$ git subtree push --prefix dist origin gh-pages，將dist目錄提交至gh-pages。

在地址欄輸入https://你的github名稱.github.io/test/即可預覽。

其他問題

用mock模擬數據，無法使用。解決方案：創建一個.json文件把數據寫死，然后引用這個文件。

對于使用Vue-cli3.0構建的項目出現的樣式失效問題，解決方案：在vue.config.js中設置baseUrl: "/staff/"。

參考

各位大佬求教一個問題 Vue項目打包后如何上傳到GitHub實現預覽

上傳本地Vue項目到github和gh-pages預覽

使用githubpagesmock數據

怎么加載本地json數據,能讓項目在github pages上預覽

GPU云服務器云服務器將項目打包上傳至騰訊云服務器圖片上傳服務器并預覽 github-pages 阿里云服務器上傳用vue做好的頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104101.html

vue插件開發流程詳解-從開發到發布至npm（二）

摘要：使用插件安裝使用測試訪問頁面注意大大的紅字，如果要在本項目下測試，需要修改項目名稱，不然報項目名字和包名字是一致的錯，無法安裝的如下結束語這個筆記繼上一篇插件開發流程詳解從開發到發布至一，替換了開發和測試的項目架構。　　前記：上一篇 https://www.cnblogs.com/adouw...，說到了一個完整的vue插件開發、發布的流程，總結下來就講了這么一個事，如何注入vue,...

Flink_China 2019-08-23 12:00 評論0 收藏0
vue-cli構建的項目在github上的預覽問題

摘要：前兩天寫了一篇關于的小米便簽項目實例，有網友建議增加在線預覽的效果，然后在上增加可預覽項目時遇到并解決一些問題，在這給大家做個分享。前兩天寫了一篇關于vuex2.0的小米便簽項目實例，有網友建議增加在線預覽的效果，然后在github上增加可預覽項目時遇到并解決一些問題，在這給大家做個分享。我的小米便簽項目是用vue-cli腳手架構建的，在執行npm run build命令之后會對項...

voidking 2019-08-22 17:12 評論0 收藏0
使用 Vue2.js + Node.js 搭建一個小型的全棧項目

摘要：大概過來一個多月，我決定兩路開工。使用給前端寫接口，配備后臺管理功能，先把后臺搭建好。大概幾天過后，后臺一些簡單的功能實現后，就開始用開始搭建前臺，也一直在想做點什么比較好，于是就做了個豆瓣評分類似的項目。寫在前面由于最近公司業務不是很忙，空閑時間比較多，于是就在糾結Vue.js（之前就學習過）和Node.js先專研哪個比較好，最終選擇了先玩玩Node.js。經過一段時間的學習，就...

freewolf 2019-08-21 16:20 評論0 收藏0
【easy-invoices】electron-vue、sqlite3 項目初探

摘要：遠程讀取會有許多限制，防止引起不必要的安全隱患。比較時可以把點去掉轉為數字類型比較腳本執行完畢下載前可以拿到更新日志時間版本號和包大小，下載時可以拿到速度。然后開啟該項目的構建。將第一步生成的填至項目環境變量，參數名為。父母都是做出納相關的工作，希望我能給他們做個簡單的進銷存，在上班的時候使用。開發一個不需要花錢買服務器，不需要依賴網絡（更新除外），單機版的程序，對于前端出身的我來說...

wpw 2019-08-23 12:36 評論0 收藏0