How add not imported image to output build with vite?

Question

I have an app folder with some images that are used by the external script and I need to include those images in the dist build folder.

I tried to log files that go to output and those images are not included. I tried to add assetsInclude property but seems that property is not for that purpose.

How can I include some specific images in dist folder that aren't imported explicitly ? Here is my vite.config.js file.

import { resolve, parse } from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
  base: '/',
  root: resolve(__dirname, 'app'),

  assetsInclude: ['/app/images/externalImage.png'],

  build: {
    emptyOutDir: true,
    
    rollupOptions: {
      output: {
        dir: './dist',
        assetFileNames: (asset) => {
          console.log(parse(asset.name).name);
          if (parse(asset.name).name === 'externalImage') {
            return "images/src/[name][extname]";
          }
          return "assets/[name].[hash][extname]";
        }
      },
    },
  },
});

Answer 1

According to the documentation you can place the asset in a special public directory under your project root. Assets in this directory will be served at root path / during dev, and copied to the root of the dist directory as-is.

The directory defaults to <root>/public, but can be configured via the publicDir option.

Note that:

• You should always reference public assets using root absolute path - for example, public/icon.png should be referenced in source code as /icon.png.
• Assets in public cannot be imported from JavaScript.