【vue.js】Vue Routerでプレレンダリング
Vue Routerを使って、ルーティングを管理するようになって、問題が発生！
それは、ルート以外のページで、ブラウザをリロードしたり、URLを直打ちしてアクセスした場合、404（ページが見つかりません）エラーが出てしまうこと。
これは、vue.jsで作成したアプリが、実際にはサーバ内にindex.htmlしか存在しないため起こります。
※index.html 内のリンクで遷移している場合は、vue.jsがルーティングして画面遷移してくれます
この解決には、様々な方法があるようなのですが、今回、プリレンダリングを使用して解決したので紹介します。
プレレンダリングとその他の方法については下記を参考にさせていただきました。
vueの公式リファレンスでも、SSRよりもプレレンダリングが簡単で良いとお勧めしていました。（小規模のアプリなら。規模が大きくなるとビルドに時間がかかってしまう、、）
vue Router導入については下記が参考になれば。
前置きが長くなりましたが、vueでプレレンダリングを行う手順について紹介します。
1. prerender-spa-plugin をインストール
下記コマンド実行
npm install prerender-spa-plugin
公式リファレンス
2.vue.config.js に下記を追加
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')module.exports = {
configureWebpack: () => {
return {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: [ '/', '/page2'] # 作成したいページを指定
})
]
}
}
}
3. ビルド
下記コマンド実行
npm run build
distフォルダ内に、page2/index.htmlが生成されれば成功です！！
以上ですーーー！！
どうしても、SPA（普通のhtmlやphpなど）寄りの開発経験が長いと、ページ遷移を考えてしまいがち。
でも、せっかくvue.jsで軽くて早いアプリを作るなら、ページをなるべく分けないようにする方が、vue.jsの良さを生かせるな、と思いました。
大きなアプリなら、phpやrailsなどと上手く組み合わせてvue.jsを使うことで、サクサク動く快適アプリを作れそう！
とは言っても、あまりvueの性能は良くはない（文法は簡単なので導入コストは低い）みたいなので、導入コストと比較して、他の言語での実装も考慮しないとかもです。
今後ももうちょっとvueを使ってみようと思ってますーーー
おやすみぃぃぃ
