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>