We have a Vue.js application that is deployed in a docker container using nginx. The nginx configuration follows pretty much the Vue.js documentation here https://cli.vuejs.org/guide/deployment.html#docker-nginx
server {
listen 80;
server_name ourhost.com;
charset utf-8;
root /var/www/ourhost.com/dist;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
location = /index.html {
expires -1;
add_header Pragma "no-cache";
add_header Cache-Control "no-store, must-revalidate";
}
}
Suppose the Vue.js app has a route https://ourhost.com/start-page
When calling the above url, nginx will try the file start-page in root, fails and servers index.html This will load the basic app javascript (ex. app.somehash.js), which then loads additional css or code junks.
That is all good, and the way it is supposed to work.
After a new deployment, the hashes of the code junks change. Suppose a user in on the page, having loaded the old code, then routes to a new part of the application, that needs loading of extra code junks, then he/she might load junks, that no longer exist.
The problem is, with the above nginx config, the content of index.html would be served for a non existing code junk. I would rather like a proper 404 error and the properly react on this error in the application (tell the user that a new version is out, an he/she should reload the page or else reload the page automatically).
I tried to not use try_files in the config. But this does not serve the index.html content when calling a route of the application directly. And I also don't want to have all possible routes of the Vue.js application in the nginx config.
And help or any ideas are very much appreciated.
