title: ReferenceError: window is not defined during vue-cli 3 build
body: <p>A pretty long time ago I created a project using <code>vue create</code>. After several months of development, we decided to <strong>not</strong> support IE11 or any versions below that (yay!).</p>
  
  <p>To do this, I want to add <strong>pure Javascript code</strong> to <code>index.html</code> inside the <code>public</code> folder.</p>
  
  <p>I added the following to <code>index.html</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
    if (window.document.documentMode) {
      setDisplay('app', 'none');
      setDisplay('browser-not-supported', 'block');
    }
  
    function setDisplay(elId, display) {
      var element = window.document.getElementById(elId);
  
      if (!element) {
        return;
      }
  
      element.style.display = display;
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>However, running <code>yarn build:production</code> again, I get the following error:</p>
  
  <pre><code>Template execution failed: ReferenceError: window is not defined
  
    ReferenceError: window is not defined
  
    - index.html:98
      /Users/[username]/Development/[...]/public/index.html:98:10
  
    - index.html:105 0971.module.exports
      /Users/[username]/Development/[...]/public/index.html:105:3
  
    - index.js:284 Promise.resolve.then
      [projectname]/[html-webpack-plugin]/index.js:284:18
  </code></pre>
  
  <p>I already added <code>configureWebpack: config =&gt; { config.output.globalObject = 'this' }</code> to <code>vue.config.js</code>, according to another answer on SO.<br>
  I also set <code>env: { node: true, browser: true }</code> in <code>.eslintrc.js</code>.</p>
  
  <p>It doesn't matter if I put the code in the <code>head</code> or <code>body</code>, same error occurs.</p>
  
  <p>Is there anything I can check, or anything I missed here?</p>