はじめに
Vue.js+Webpackで作ったプロジェクトをそのままBuildして、GitHub Pagesへサブディレクトリとしてデプロイしました。
- 開発環境(Local) ⇒https://localhost:8080/
- 本番環境(GitHub Pages) ⇒https://<username>.github.io/<repository>/
GitHub PagesのURLにアクセスしたところ、imgタグの画像とCSSに定義した画像パスが404エラーとなって、5時間もはまってしまったので、解決するまでのメモを残しておきたいと思います。
GitHub Pagesに公開するために設定すべきところ
1.コンフィグファイルのパス
module.exports = {
build: {
index: path.resolve(__dirname, '../docs/index.html'),
assetsRoot: path.resolve(__dirname, '../docs'),
assetsSubDirectory: 'static',
assetsPublicPath: '/<repository>/',
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
index
GitHub Pagesは「docs」配下のindex.htmlを探しに行くので、デフォルトの「dist」を「docs」に修正する。
assetsRoot
ビルドファイルの出力先をデフォルトの「dist」から「docs」に修正する。
assetsPublicPath(ハマり箇所1)
デフォルト値 ⇒ assetsPublicPath: '/'
設定すべき値 ⇒ assetsPublicPath: '/<repository>/'
デフォルト値のままの場合、ドメイン直下(https://<username>.github.io/)に assets がある体のコードが出力されてしまい、画像ファイルなどを読み込めないためリポジトリ名を設定する。
2.Vueルータ
export default new Router({
mode: 'history',
base: '/<repository>/',
routes: [
{
path: '/',
name: 'Top',
component: Top
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '*',
name: 'Not Found',
component: PageNotFound,
title: 'Not Found'
}
]
})
baseオプション
baseオプションのを追加する。追加しないと画面遷移がおかしくなるため。(ハマり箇所2)
3.そのほか
「window.location.host」を使用したところがあれば注意してください。Local開発環境の動きと違うため(「.github.io」まで取得)。