vue cli 3.x 項目部署到 github pages的方法
github pages 是 github 免費為用戶提供的服務(wù),寫博客,或者部署一些純靜態(tài)項目。
最近將 vue cli 3.x 初始化項目部署到 github pages,踩了一些坑,記錄如下。
https://github.com/nusr/resume-vue
1. vue-router 不要開啟 history 模式
路徑中的 # 比較丑,就開啟了 vue-router 的 history 模式,去掉了 #。平時做項目也是默認(rèn)開啟 history 模式。折騰了半天發(fā)現(xiàn),我這是部署到 github pages ,服務(wù)器沒有配置,導(dǎo)致頁面一直請求不到。
2. 配置 publicUrl
打包路徑也要單獨配置,否則也是請求不到頁面。
比如我的項目地址是 https://github.com/nusr/resume-vue
我要部署到 https://nusr.github.io/resume-vue,那么 publicPath 要配置為 /resume-vue
// vue.config.js module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/resume-vue" : "/" };
3. css 引入圖片錯誤
css 引入背景圖片時,開發(fā)環(huán)境沒有任何問題,但是一旦部署后,就無法獲取圖片了。
稍微改下 App.vue 的代碼,暫時解決了這個問題。
<!--App.vue--> <template> <div id="app"> <router-view /> </div> </template> <script> export default { name: "App", mounted() { /** * 解決 css 引入圖片在 github pages 無法獲取的問題 */ const { NODE_ENV } = process.env; document.documentElement.className = NODE_ENV; } }; </script> <style lang="less"> @import "~@/assets/global.less"; </style>
給 html 標(biāo)簽配置了一個頂級類,寫上不同的 css 解決了這個問題。
真時的部署環(huán)境不是這樣的,部署文件夾就是根目錄,但 github pages 部署文件夾不是根目錄,就有這個問題。
// global.less .development { background-image: url(/background.png); } .production { background-image: url(/resume-vue/background.png) }
4. 自動部署腳本
根目錄下新建 deploy.sh 文件,文件內(nèi)容如下。
# deploy.sh # 錯誤時停止 set -e # 打包 npm run build # 進(jìn)入目標(biāo)文件夾 cd dist # 提交到本地倉庫 git init git add -A git commit -m 'deploy' # 提交到 https://github.com:nusr/resume-vue 項目的 gh-pages 分支 git push -f git@github.com:nusr/resume-vue.git master:gh-pages cd -
部署命令是 bash deploy.sh
開啟 github pages
建立倉庫,倉庫名稱是 username.github.io ,必須是這種格式。
比如我的用戶名是 nusr,建立的倉庫就是 nusr.github.io。
github pages 默認(rèn)開啟分支是 gh-pages,可以進(jìn)入該倉庫頁面,點擊 Settings -> GitHub Pages,切換展示的分支。
GitHub Pages 支持定制域名,支持 jsonp 請求。
參考
以上所述是小編給大家介紹的vue cli 3.x 項目部署到 github pages的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
解決el-tree數(shù)據(jù)回顯時子節(jié)點部分選中父節(jié)點都全選中的坑
本文主要介紹了解決el-tree數(shù)據(jù)回顯時子節(jié)點部分選中父節(jié)點都全選中的坑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08解決vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)的問題,本文通過實例結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05