Deploying vue js app and getting 404 error in routes - vue.js

Question

I am using a webpack simple but after deploying my app to an hosting server my index page works fine but other pages gives a 404 error .Please i dont know if anyone have any idea what is happening .The webpack simple only generate build js file for me and thats all, i dont get an index.htm file in my dist folderc

Answer 1

I am going to show you how to do it but before read this from vue.js docs
Step 1
Run the following command
npm run build
Step 2
Copy the dist folder and put it in a new folder
Step 3
In the new folder create a new file and name it .htaccess
Step 4
Inside .htaccess file insert the following code
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Now you application is ready to deploy!You can even run it using apache on local machine.
Please again, read docs you can find more configurations there for nginx, node.js and learn more about all server configurations.
Additional info: I am using laragon + apache and after the step 4, I put the new folder inside www directory of Laragon, and serve it with Laragon. I guess you can do the same by using xampp or wamp by putting the new folder in docs directory.

Answer 2

That is due to the history push mode on your vue router.
If you use Apache, follow these steps, else you can read the vuejs doc https://router.vuejs.org/guide/essentials/history-mode.html:
If Apache version is above 2.2, you can use Fallback ressource instead of mod_rewrite in your apache config. It works for me.
In /etc/apache2/apache2.conf
<VirtualHost *:80>
ServerName YourServerName(like yourwebsite.com)
DocumentRoot /var/www/yourAppLocation/dist
<Directory "/var/www/yourAppLocation/dist">
FallbackResource /index.html
</Directory>
</VirtualHost>
Or you can use classical mod_rewrite
<VirtualHost *:80>
ServerName YourServerName(like yourwebsite.com)
DocumentRoot /var/www/yourAppLocation/dist
<Directory "/var/www/yourAppLocation/dist">
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
</Directory>
</VirtualHost>

Answer 3

You need to set up your hosting to route every 404 error to index.html and let vue handle the errors , which hosting are you using? if you cant set up your error pages you could remove mode:'history' mode from your router or use hash mode instead, here is the official docs to how to setup your host, as for your index.html you can find it in your project root not in dist folder