將打包好的vue項目上傳github並製做預覽連接（pages）

當Vue項目完成後，在根目錄下打開命令行，輸入命令：

npm run build

實際上此命令就是執行build.js文件，將項目打包成靜態資源。
此命令完成後，項目根目錄下會多出一個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的數據沒法正常加載。

字體圖標沒法加載
頁面中用background加載的圖片能夠正常顯示，可是全部的字體圖標都不能正常顯示，解決方法：打開根目錄下　build中的　utils.js　文件，在控制build樣式文件代碼中添加　publicPath: ‘../../‘，　以下：

保存後，依舊從新’npm run build’,打開dist目錄下的index.js能夠看到字體圖標正常顯示了。
這裏爲何須要這樣修改，能夠參考https://github.com/vuejs-temp...。

Mock數據沒法正常加載(個人作法是把模擬的json數據放到cdn上，跳過這一步)
此項目的絕大部分頁面內容是經過在跟目錄下建立的data.json文件渲染到頁面上的，是模擬從後端請求數據的，開發調試時用’npm run dev’命令，會藉助node啓動一個本地服務器，能夠正常的渲染出相應的數據。而經過打包後的項目時屬於靜態資源的，點擊index.html查看項目，是沒法加載mock的數據的，瀏覽器也會報跨域的錯誤。若想正常的加載mock數據，最好的方式是講打包後的資源丟到服務器中，或者使用jsonp請求線上真實數據，由於它的原理是利用script標籤來得到數據，在github上是能夠預覽到的。

如何在github上預覽網頁效果：
settings—github pages—選擇「master branch」和「save」—刷新—再次找到「github pages」複製底下的連接—返回點擊倉庫名—點擊edit—粘貼到框框內，必定要記住添加文件名及其後綴好比index.html—save.別人就能夠經過這個連接訪問你的網頁

原文：https://blog.csdn.net/x550392...