Awesome

vite-multiple-assets

vite-multiple-assets add support for multiple public asset directories to vite (or astro).

Document

Feature

No copy file when run dev, help with no impact on performance when launching apps with vite
Support automatically copy files when running build
Support SSR

Quick setup would be in the `vite.config.js`:

By default, vite's configuration only allows you to specify 1 public directory, via publicDir in vite.config.ts

export default defineConfig({
    // default is public folder
    publicDir:''
})

With this plugin you can add multiple public directories

install

npm i -D vite-multiple-assets

Config options

dirAssets: list of your static directories
mimeTypes: Add your extended content types, by default there will be the following content types
ssr: default is false support client side, using with Solid-js or framework support SSR please enable this flag to true

{
    ".html": "text/html",
    ".js": "text/javascript",
    ".css": "text/css",
    ".png": "image/png",
    ".jpg": "image/jpeg",
    ".gif": "image/gif",
    ".svg": "image/svg+xml",
    ".json": "application/json",
    ".woff": "font/woff",
    ".woff2": "font/woff2",
    ".ttf": "font/ttf",
    ".eot": "font/eot",
    ".otf": "font/otf",
    ".wasm": "application/wasm",
    ".mjs": "text/javascript",
    ".txt": "text/plain",
    ".xml": "text/xml",
    ".wgsl": "text/wgsl",
    ".mp3": "audio/mpeg",
    ".mp4": "video/mp4",
    ".webm": "video/webm",
    ".webp": "image/webp",
    ".ico": "image/x-icon",
    ".tiff": "image/tiff",
    ".gz": "application/gzip",
    ".zip": "application/zip",
    ".rar": "application/x-rar-compressed",
    ".7z": "application/x-7z-compressed"
}

Note: In case the content type is not found, it will be automatically handled according to the mime-types library

In vite.config.ts

-Before `1.3.0`

import DynamicPublicDirectory from "vite-multiple-assets";

-After `1.3.0`
import {DynamicPublicDirectory} from "vite-multiple-assets";
// same level as project root
const dirAssets = ["libs/assets", "repo1/assets", ...];

// example
const mimeTypes = {
    '.acc': 'application/acc'
}

export default defineConfig({
    plugins: [
        DynamicPublicDirectory(dirAssets, {
            ssr: true,
            mimeTypes
        })
    ]
})

Support Astro build (version 1.3.x above):

import {astroMultipleAssets} from "vite-multiple-assets";
const assets = ["libs/assets", "repo1/assets", ...];
export default defineConfig({
    integrations: [
        astroMultipleAssets(assets)
    ],
});

The above configuration will automatically add files in public, libs/assets, repo1/assets folders as static assets for your project, which can be understood as below:

export default defineConfig({
   // default is public folder
   publicDir:["public","libs/assets","repo1/assets",...]
 })