After deployment of vue app only homepage works, subpages not found

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.

Solution

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>