CODEWITHSUNDEEP
vue.jsvue-routervuejs3
Jacky001
Jacky001

Reputation: 73

Page refresh returns 404 error on deployed vuejs vue-router apllication

The homepage/base url of the app can be refreshed with no issues. but other pages return 404 on page refresh. Please are there any work around for this?

Here is a screenshot of the 404. [1]: https://i.sstatic.net/lc8xD.png

Upvotes: 1

Views: 7252

Answers (6)

Miguel Angel JD
Miguel Angel JD

Reputation: 1

with nginx set your server for vue router history mode https://router.vuejs.org/guide/essentials/history-mode.html#nginx

Upvotes: 0

Jozef
Jozef

Reputation: 117

I found solution which works for me and router works too :)

IIS setup rewrite rule:

<rule name="MY SPA APP REWRITE RULE" stopProcessing="true">
    <match url="myAppBaseURL/(.*)" />
    <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    </conditions>
    <action type="Rewrite" url="/myAppBaseURL?rewriteURL={R:1}" />
</rule>

And then in the main App.vue add this

import { useRouter } from 'vue-router'
const router = useRouter()

if(new URLSearchParams(window.location.search).get('rewriteURL')){
  router.push(new URLSearchParams(window.location.search).get('rewriteURL'))
}

Upvotes: 0

ajmirani
ajmirani

Reputation: 512

Page refresh returns 404 error VueJs (mode:history) with Laravel:

The solution that worked for Laravel:

Assuming your entry point is the index method, you just need to add this route at the bottom of your routes/web.php file.

Route::get('{any}', function () {
    return view('welcome');
})->where('any','.*');

Upvotes: 0

StefanBK
StefanBK

Reputation: 29

The solution that worked for me:

In /etc/apache2/sites-available/"yourAppDomain".conf add to the end:

FallbackResource /index.html
</VirtualHost>

Upvotes: 3

saibbyweb
saibbyweb

Reputation: 3254

Try adding this to your .htaccess:

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

Upvotes: 1

Aghilan B
Aghilan B

Reputation: 553

It happens because Vue routing is only on the frontend side. So when you refresh the page it goes backend server. And it checks for any files to satisfy the request.

To solve this issue. You have to tell your apache webserver to handle it for your front end Vue app.

Upvotes: 5

Related Questions