title: Changing the input and output directory in Vite
body: <p>I am using Vite (<a href="https://vitejs.dev/" rel="noreferrer">https://vitejs.dev/</a>) for a static multipage site.
  This is the default project folder structure after the build command.</p>
  <pre><code>my-app/
  ├─ node_modules/
  ├─ dist/
  │  ├─ assets/
  │  ├─ index.html
  ├─ index.html
  ├─ main.js
  ├─ style.scss
  ├─ package.json
  </code></pre>
  <p>But I want to make this a multipage site and change the input and output directory for a better organizable way like this</p>
  <pre><code>my-app/
  ├─ node_modules/
  ├─ package.json
  ├─ src/
  │  ├─ about.html
  │  ├─ index.html
  │  ├─ main.js
  │  ├─ style.scss
  ├─ dist/
  │  ├─ assets/
  │  ├─ about.html
  │  ├─ index.html
  </code></pre>
  <p>Basically, it should take the <code>src</code> as an input folder and output <code>dist</code> as a child of the <code>my-app</code>. When I try to do this it shows errors, then I change the scripts of the <code>package.json</code> into this</p>
  <pre><code>  &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;vite src&quot;,
      &quot;build&quot;: &quot;vite build src&quot;,
      &quot;serve&quot;: &quot;vite preview&quot;
    },
  </code></pre>
  <p>This way the <code>dev</code>command works fine. But the 'build' command makes the dist folder inside the <code>src</code> folder and does not generate other HTML files except <code>index.html</code>.</p>
  <p>Now how can I fix this? Any suggestion?</p>