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

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 項目並預覽

1. 將項目提交至倉庫(包括dist目錄)，假如倉庫名稱爲test.
2. $ git subtree push --prefix dist origin gh-pages，將dist目錄提交至gh-pages。
3. 在地址欄輸入https://你的github名稱.github.io/test/便可預覽。

其餘問題

1. 用mock模擬數據，沒法使用。解決方案：建立一個.json文件把數據寫死，而後引用這個文件。
2. 對於使用Vue-cli3.0構建的項目出現的樣式失效問題，解決方案：在vue.config.js中設置baseUrl: '/staff/'。

參考

1. 各位大佬 求教一個問題 Vue項目打包後如何上傳到GitHub實現預覽
2. 上傳本地Vue項目到github和gh-pages預覽
3. 使用githubpagesmock數據
4. 怎麼加載本地json數據,能讓項目在github pages上預覽