in Vue single-page app, how to prevent 404s on refresh

Question

My single-page Vue app is running at my_domain.com/my_app/, but when I refresh anywhere, I get a 404/not found (not in my local dev environment). I have set an .htaccess file according to the docs and my router & vue.config.js file are configured according to my understanding as to how to prevent this but still I'm getting the 404s. Can someone please shed some light on this? (This is all according to Deploying vue js app and getting 404 error in routes & the Vue.js docs)

my vue.config.js (pertinent excerpt):

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/my_app/' : '/',
    // [ etc. ]

routes.js (pertinent excerpt):

export default new Router({
    mode: "history",
    base: process.env.BASE_URL, // base: '/my_app/', also NG
    routes: [
        {
            path: '*',
            redirect: '/index.html'
        },
        {
            path: '/',
            redirect: '/index.html'
        },
        // [ SNIP ... my named routes here ]
        // and I also tried moving ...
        {
            path: '*',
            redirect: '/index.html'
        },
        // ... to the end of my routes
]

.htaccess:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /my_app/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Many thanks in advance,

Whiskey T.

Phil Phil · Accepted Answer · 2020-06-02T02:43:38

You need to use a path relative to the RewriteBase in the final RewriteRule, ie

RewriteRule . index.html [L]

https://htaccess.madewithlove.be?share=b74bdbac-b8d3-5ee7-a586-2083808e0740

A much better option these days is to use the FallbackResource Directive. All you need is

FallbackResource /my_app/index.html

and the appropriate Indexes override which you probably have already.

in Vue single-page app, how to prevent 404s on refresh

1 Answers