VueJS/browser caching production builds : <p>I have a VueJS app. Whenever I run <code>npm run build</code> it creates a new set of <code>dist/*</code> files, however, when I load them on the server (after deleting the old build), and open the page in browser, it loads the old build (from cache i assume). When I refresh the page, it loads the new code no problem.</p>

<p>This is my index.html:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/&gt;
        &lt;meta http-equiv="cache-control" content="max-age=0" /&gt;
        &lt;meta http-equiv="cache-control" content="no-cache" /&gt;
        &lt;meta http-equiv="expires" content="-1" /&gt;
        &lt;meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /&gt;
        &lt;meta http-equiv="pragma" content="no-cache" /&gt;
        &lt;link rel="stylesheet" href="/static/css/bootstrap.min.css"/&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="app"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Is there a way to force it to load new code every time or (ideally) to check if the old files are gone from the server, then refresh the browser?</p>
