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

時間 2019-11-17

標籤 vue cli 3.x 項目部署 github pages 欄目快樂工作简体版

原文原文鏈接

github pages 是 github 免費爲用戶提供的服務，寫博客，或者部署一些純靜態項目。javascript

最近將 vue cli 3.x 初始化項目部署到 github pages，踩了一些坑，記錄以下。css

1. vue-router 不要開啓 history 模式

路徑中的 # 比較醜，就開啓了 vue-router 的 history 模式，去掉了 #。平時作項目也是默認開啓 history 模式。折騰了半天發現，我這是部署到 github pages ，服務器沒有配置，致使頁面一直請求不到。vue

2. 配置 publicUrl

打包路徑也要單獨配置，不然也是請求不到頁面。java

好比個人項目地址是 https://github.com/nusr/resume-vuegit

我要部署到 https://nusr.github.io/resume-vue，那麼 publicPath 要配置爲 /resume-vuegithub

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/resume-vue" : "/"
};
複製代碼

3. css 引入圖片錯誤

css 引入背景圖片時，開發環境沒有任何問題，可是一旦部署後，就沒法獲取圖片了。vue-router

稍微改下 App.vue 的代碼，暫時解決了這個問題。npm

<!--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 標籤配置了一個頂級類，寫上不一樣的 css 解決了這個問題。json

真時的部署環境不是這樣的，部署文件夾就是根目錄，但 github pages 部署文件夾不是根目錄，就有這個問題。

// global.less
.development {
  background-image: url(/background.png);
}

.production {
  background-image: url(/resume-vue/background.png)
}
複製代碼

4. 自動部署腳本

根目錄下新建 deploy.sh 文件，文件內容以下。

# deploy.sh
# 錯誤時中止
set -e

# 打包
npm run build

# 進入目標文件夾
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 -
複製代碼