vue-cli構建的項目在github上的預覽問題

voidking 發布于2019-08-22 17:12 / 1953人閱讀

摘要：前兩天寫了一篇關于的小米便簽項目實例，有網友建議增加在線預覽的效果，然后在上增加可預覽項目時遇到并解決一些問題，在這給大家做個分享。

前兩天寫了一篇關于vuex2.0的小米便簽項目實例，有網友建議增加在線預覽的效果，然后在github上增加可預覽項目時遇到并解決一些問題，在這給大家做個分享。

我的小米便簽項目是用vue-cli腳手架構建的，在執行npm run build命令之后會對項目進行編譯打包，并在項目中生產dist文件夾，壓縮后的文件都在dist文件夾中。

然而，在push項目到github上時發現，dist文件夾并沒有上傳上去，經過一番摸索之后找到了問題。

忽略文件

對比github上和本地文件之后，發現最重要的dist文件沒有被提交到github上，如下圖：

dist文件是npm run build執行后被編譯打包生成的文件，CSS、JS、圖片等文件都在dist文件中，所以該文件必須要提交到github上。

在項目根目錄下有一個.gitignore文件，文件中設置一些文件名，對應的文件將不會被提交到github上面。

在.gitignore文件中，有dist等不被上傳的文件名稱，如下圖：

解決方法：把.gitignore文件中的dist文件名刪除，然后重新push到github上就有dist文件了。

路徑問題

dist文件上傳成功后，打開該文件路徑下的github pages預覽地址，在進行預覽的時候又發現一個問題 路徑問題。

查看控制臺，可以看到文件的路徑都出現了問題，如下圖:

發現文件的路徑都是/根路徑,我們總不能把static文件移動到根目路徑下吧，那樣就太low了。

所以我們要找到配置文件更改下路徑，找到config/index.js文件，如下圖：

修改圖中assetsPublicPath的參數：assetsPublicPath: "./"或者assetsPublicPath: ""，修改后，每次執行npm run build后文件路徑將會按照參數生成。

這樣設置之后，再次npm run build，重新push到github上面，打開.github.io//dist/index.html就能看到預覽頁了，我的小米便簽預覽地址。

總結

這就是我在增加可預覽地址時遇到的一些問題，在這分享出來，希望能幫助到需要幫助的人。

來都來了點一下贊吧，你的贊是對我最大的鼓勵^_^

GPU云服務器云服務器項目搭建在云服務器上的好處訪問服務器上的項目么阿里云服務器上的項目怎么更新 webrtc在qt上的實現

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

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

Vue+Express全棧購物商城

摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。服務端技術棧登錄授權用認證機制，來實現登錄登出。服務器配置和緩存策略，根據不同的來代理。申請證書全站升級到，配置的協議。一、前言提綱基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。二、歷史版本基于Vue-CLI2.0:點我查看這個分支版本是一兩年前...

Richard_Gao 2019-05-22 18:23 評論0 收藏0
Vue+Express全棧購物商城

摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。服務端技術棧登錄授權用認證機制，來實現登錄登出。服務器配置和緩存策略，根據不同的來代理。申請證書全站升級到，配置的協議。一、前言提綱基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。二、歷史版本基于Vue-CLI2.0:點我查看這個分支版本是一兩...

luzhuqun 2019-08-26 13:50 評論0 收藏0
vue項目打包后上傳至GitHub，并實現github-pages的預覽

摘要：項目打包后上傳至，并實現的預覽打包項目項目命令行輸入打包命令，生成了文件夾打包完成。參考各位大佬求教一個問題項目打包后如何上傳到實現預覽上傳本地項目到和預覽使用數據怎么加載本地數據能讓項目在上預覽 vue項目打包后上傳至GitHub，并實現github-pages的預覽 1. 打包vue 項目 vue項目：showImg(https://segmentfault.com/img/bVb...

wangdai 2019-08-23 17:17 評論0 收藏0
vue服務端渲染demo將vue-cli生成的項目轉為ssr

摘要：無需使用服務器實時動態編譯，而是使用預渲染方式，在構建時簡單地生成針對特定路由的靜態文件。與可以部署在任何靜態文件服務器上的完全靜態單頁面應用程序不同，服務器渲染應用程序，需要處于運行環境。更多的服務器端負載。目錄結構 -no-ssr-demo 未做ssr之前的項目代碼用于對比 -vuecli2ssr 將vuecli生成的項目轉為ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

seanHai 2019-08-22 13:58 評論0 收藏0