Tell vite to inline external scripts

Question

I hope I can ask this question somewhat congruently. I am in a situation where my vite production build does not work, but the dev build does.

I am in a statically rendered site, inside a folder site, that then is taken by vite to create the final output. I work mainly in a subfolder _svelte. In there, I also have a folder called api that contains some functions, that I would like to use outside of svelte.

In site, there is another html page, let's say test/index.html. That page contains a <script type="module">, which then imports these functions from /_svelte/api.

Now, this all works in dev, but in production, the bundle for test/index.html contains references to the script paths, as in /_svelte/api, etc. But these files never exist, so it all fails.

My vite config looks like this:

export default defineConfig(({ command, mode }) => {
  if (command === 'build') {
    // these are all entry files for vite
    const files = fg.sync('**/*.html', {
      cwd: process.env.ROOT,
      absolute: true,
    });

    const external = fg.sync('../_svelte/**/*.ts', {
        cwd: process.env.ROOT,
        absolute: true,
      })
      .map((file) => file.replace(`${__dirname}/site`, ''))
      .filter((file) => !file.includes('main') && !file.includes('vite-env.d.ts'))
      .map((file) => file.replace('.ts', ''));

    return {
      plugins: [svelte({ configFile: '../../svelte.config.js' })],
      root: process.env.ROOT,
      build: {
        publicDir: '../public',
        rollupOptions: {
          input: {
            main: resolve(process.env.ROOT, 'index.html'),
            ...Object.fromEntries(
              files.map((file) => [basename(file.replace('/index', ''), '.html'), file])
            ),
          },
          external,
        },
      },
    };
  }
});

I hope this is enough information somehow to help me in this situation. I am not sure how to fix it, it's all rather opaque.

Answer 1

This Vite build plugin allows you to inline all JavaScript and CSS resources directly into the final dist/index.html file. By doing this, your entire web app can be embedded and distributed as a single HTML file.

https://github.com/richardtallent/vite-plugin-singlefile

1. install npm install vite-plugin-singlefile --save-dev

2. Add to vite.config.js

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { viteSingleFile } from "vite-plugin-singlefile"

export default defineConfig({
    plugins: [vue(), viteSingleFile()],
})