vue cli 3.x項目如何部署到github pages

這篇文章主要介紹了vue cli 3.x項目如何部署到github pages，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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 請求。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue cli 3.x項目如何部署到github pages”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!