jtk

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

f:id:jotaki:20190315114020p:plain

前回の続き で、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/ など直接ルート設定したページのリンクを踏むとダメそう。。