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