I deployed a Vue App on an hosting platform, i got to know that if i serve
"www.mydomain.com/about" and hit enter, i get 404 Error Page. have i deployed the wrong thing?
npm run build
note: the dist folder was deployed after build
Text
but when you remove /about, the real page got served, and also when you click on the links on the navbar, it shows the about pages. but when you refresh the pages, it return 404 Error.
Why is this so?
You need to config your server because, you are resolving the routes with the server, and not with vue (When you click on the navbar and go to /about, you can access, because you are resolving the route with vue).
Check this link
Uou are using Vue router's history mode. For any page URL to work for vue in this case you will have to make some changes in your web server's configuration. Here are 2 of the most common config settings. Make these changes, restart your web server and your issue will be resolved.
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
try_files $uri $uri/ /index.html;
}
Full documentation available at https://router.vuejs.org/guide/essentials/history-mode.html.
Related
I am attempting to deploy a multipage vue3 frontend to an application. It works fine in development mode, but in production, when I attempt to navigate to a url via the search bar -- e.g. https://mywebsite.com/customers, I get a 404.
I am able to fix this by redirecting to the homepage using the suggestion on vue-router's documentation, but then it just goes to the homepage rather than showing the actual page I would like to visit. Is there some way around this that I am missing? An additional step or does this suggest I am misconfiguring this somehow?
I solved this by setting up the server. You need to understand what server you have installed. Go to config update and restart the server.
Here are the Server Configurations
Apache
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
try_files $uri $uri/ /index.html;
}
I have created a subdomain test.example.com from cPanel. I then built my Vue app using
npm run build
and zipped the whole dist folder to upload to the server. Once uploaded I expanded the zip file so the files are on the server.
This works perfectly for my home page, check, however, any of the subpages return the 404 while this issue is not observable on the localhost.
I don't understand how to fix this.
I use the vue.config.js with
module.exports = {
publicPath: '/'
}
and also the links to subpages look fine but just don’t work.
You are using history mode in your router, in order for it to work all requests need to go back to index.html
All you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in.
Since you are using cPanel I would assume that your server is using Apache.
Therefore you will need to create a .htaccess file to redirect all requests to index.html. You will need to create the .htaccess file inside your public_html folder (assuming that is where your application code lives). Then add the following.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
I am trying to set up a Nuxt app using #nuxt/pwa starter-template for Server Side Rendering on a Shared Hosting.
However my Nuxt app is running on "http://localhost:50000". I am trying to show the running app from "http://example.com" by Rewriting Rule in .htaccess.
When trying to access "http://example.com" it's showing 404. Without the "Index (/)" route every other route is fine. Even coming to "Index (/)" route from any other route is also OK. Only showing 404 when trying to load the "/" route directly.
Eg:
http://example.com Doesn't work
http://example.com/contact Works fine
*** There is already an issue exactly like mine at Github: https://github.com/nuxt/nuxt.js/issues/2625
But I couldn't found anything helpful from there.
Here is the .htaccess file I am using. --
Options +FollowSymLinks
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^(.*) http://127.0.0.1:50000/$1 [P,L]
</IfModule>
Can somebody help me out with this issue??? Thanks in advance!
It seems to be a bit late for this answer, but I only found it in github and would like to help anyone who finds this topic with the same problem.
This htaccess is working for me, it loads the index.vue page normally when I refresh and the navigation works.
Replace my-domain with your domain.
RewriteEngine on
# Forcing all incoming requests to HTTPS.
# HTTPS is required for PWA. If you don't want PWA feature you can deisable next 2 lines
RewriteCond %{HTTP_HOST} ^my-domain.com.br$
RewriteRule "(.*.(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.*) "http://127.0.0.1:3000/$2" [P,L]
Use my .htaccess code:
RewriteRule ^index.html.var$ http://127.0.0.1:3000/ [P]
RewriteRule ^(.*) http://127.0.0.1:3000/$1 [P]
This problem has also troubled me for a long time.
I added _index.vue dynamic vue-router and,
validate ({params}) {
console.log (params.index);
}
The terminal outputs "index.html.var".
So I was thinking that when we visited the homepage, Apache sent a proxy, but the request URL received by nuxt.js was not "/" but "index.html.var".
A little late to this party but if anyone is experiencing the same issue, what fixed it for me was to disable DirectoryIndex in .htaccess.
RewriteEngine on
DirectoryIndex disabled
RewriteRule ^(.*) http://127.0.0.1:50000/$1 [P,L]
RewriteEngine on
Forcing all incoming requests to HTTPS.
HTTPS is required for PWA. If you don't want PWA feature you can deisable next 2 lines
RewriteCond %{HTTP_HOST} ^my-domain.com.br$
RewriteRule "(..(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.) "http://127.0.0.1:3000/$2" [P,L]
Work for me.
After doing npm run build I uploaded index.html and the dist folder to my remote server yet the app doesn't work properly: there's no styles at all, routes don't work and most UI elements don't load.
Strangely, the exact same index.html + dist folder, copied anywhere on my local server, works perfectly either as file protocol or http protocol.
I have no idea what to make of this and I can't troubleshoot it because there's no error message in the console even though the app doesn't work. Any suggestion welcome.
Note: I use vue-cli / webpack-simple
If your provider is running Apache web server, upload to the same directory you uploaded your SPA app the .htaccess file with this content:
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html [QSA,L]
</ifModule>
I'm hosting my React app on hostgator which uses Apache. In order to enable refreshing of the page without getting 404 not found I need to create and edit an .htaccess file which looks like this right now:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /index.html [L]
</IfModule>
What happens when I refresh the page on a subpage (/some-sub-page) is the index.html renders but the URL resets to root.com (without the /some-sub-page).
I want the index.html to render, but I also want to keep the url in order for React Router to kick in and serve the correct components.
I've gone through the Apache documentation as well as threads about .htaccess editing but none seems to cover the problem with the URL resetting.
How would one go about that?
Best regards.