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
2
-
1Can you please show the <template> and <script> of the component/page where the 404 occurs?h0p3zZ– h0p3zZ2022-04-24 15:31:10 +00:00Commented Apr 24, 2022 at 15:31
-
It happens to all pages thats not the base url... I dont think it has anything to do with code, I think it has to do with the virtual url vue-router history mode sets in the browser url bar. They're not real so when the page refreshes, http server tries to load the url and fails.. There must be an all-server acceptable work around for this.Jacky001– Jacky0012022-04-24 15:38:02 +00:00Commented Apr 24, 2022 at 15:38
Add a comment
|
6 Answers
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.
4 Comments
Jacky001
How do i do that please...?
Aghilan B
Check this link sanakil.blogspot.com/2021/03/… . It will help you. I have written it for the subfolder but you can use it with the base URL(/) too. You just have to set up an apache configuration.
Jacky001
Thanks. It doesnt bring an error message now. It just shows blank.
ATG
@Jacky001 have you resolve the issue? I'm hosting my web now and getting the same issue.
The solution that worked for me:
In /etc/apache2/sites-available/"yourAppDomain".conf add to the end:
FallbackResource /index.html
</VirtualHost>
Comments
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>
2 Comments
Jacky001
It doesnt work even after refreshing apache server. However error text is not displaying. It just blank and doesnt redirect.
saibbyweb
I believe this can guide you to the solution: router.vuejs.org/guide/essentials/…
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','.*');
Comments
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'))
}
Comments
with nginx set your server for vue router history mode https://router.vuejs.org/guide/essentials/history-mode.html#nginx
1 Comment
Community
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
