CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

BrowserSyncでSPAのURLを直接たたいても404にならないようにする

ローカル環境でSPAの開発をしていると、直接URLをたたいたり、リロードしたりすると404が返ってきます。
index.htmlをリロードすると問題ないですが、 /item/ などのURLを叩くと、SPAの場合そこにはディレクトリもファイルもないので当然そうなります。
そうすると、変更のたびにindex.htmlからリンクを辿っていかなくてはならず面倒です。

それらを普段開発に使っている Laravel MixBrowserSync に、ミドルウェアの connect-history-api-fallback を加えてリクエストを処理していきます。

connect-history-api-fallbackのインストール

npm install --D connect-history-api-fallback

ライブラリをインポート

const historyFallback = require('connect-history-api-fallback');

BrowserSyncの設定

mix.browserSync({
    server: 'public',
    proxy: false,
    files: [
        'public/**/*.html',
        'public/common/js/*.js',
        'public/common/css/*.css',
    ],
    middleware: [
        historyFallback()
    ]
})

参考

connect-history-api-fallback - npm

トップへ戻る