Vue CLI(Webpack)と vue-router を使ったプロジェクトを GitHub Pages で公開する

前回の続き で、vue-router のパス設定( path: “/about” みたいなの)を変更すると思ったのですが、違いました。
vue-routerのgithub-pages用設定 - Qiita に書いてある通りなのですが、
- config/dev.env.js
- config/prod.env.js
- src/router/router.js
を編集する必要がありました。
作成した GitHub Pages のURLは https://yuheijotaki.github.io/works/ なので、
config/dev.env.js
...
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
ROOT_BASE: '""' // Vue router を GitHub Pages で動かす用の設定
})
config/prod.env.js
...
module.exports = {
NODE_ENV: '"production"',
ROOT_BASE: '"works/"' // Vue router を GitHub Pages で動かす用の設定
}
src/router/router.js
...
export default new Router({
mode: 'history',
base: process.env.ROOT_BASE, // Vue router を GitHub Pages で動かす用の設定
routes: [
...
としてからビルド → デプロイでできました。
ただやっぱり、 https://yuheijotaki.github.io/works/about/ など直接ルート設定したページのリンクを踏むとダメそう。。