vite · Vite Docs
Static Asset Handling | Vite (main branch)
Explains how to import, reference, and manage static assets such as images, JSON, and CSS within a Vite project, including how Vite handles asset URLs and public directory assets.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Static Asset Handling | Vite (main branch)
Explains how to import, reference, and manage static assets such as images, JSON, and CSS within a Vite project, including how Vite handles asset URLs and public directory assets.
When To Use
Use when you need to implement asset imports in JavaScript, manage files in the public directory, or resolve static asset URLs in a Vite-based application.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/main-vite-static-asset-handling-branch-workflow-guide.md | A guide explaining how to import static assets as URLs, strings, or inline content within a Vite project. | Questions about a guide explaining how to import static assets as URLs, strings, or inline content within a Vite project. |
examples/main-vite-static-asset-handling-branch-vite-static-asset-import-javascri.text | A JavaScript code snippet demonstrating how to import and assign a static image URL to a DOM element's source attribute in Vite. | Exact payloads, commands, or snippets shown in A JavaScript code snippet demonstrating how to import and assign a static image URL to a DOM element's source attribu... |
examples/main-vite-static-asset-handling-branch-vite-static-asset-import-javascri-2.text | A JavaScript code snippet demonstrating how to import and use an SVG asset URL via a dynamic style assignment. | Exact payloads, commands, or snippets shown in A JavaScript code snippet demonstrating how to import and use an SVG asset URL via a dynamic style assignment. |
examples/main-vite-static-asset-handling-branch-vite-static-asset-import-url-quer.text | An example demonstrating how to import a file URL using the ?url query suffix in Vite. | Exact payloads, commands, or snippets shown in An example demonstrating how to import a file URL using the ?url query suffix in Vite. |
examples/main-vite-static-asset-handling-branch-vite-static-asset-handling-import.text | A code example demonstrating how to import static assets in Vite using the no-inline query parameter. | Exact payloads, commands, or snippets shown in A code example demonstrating how to import static assets in Vite using the no-inline query parameter. |
examples/main-vite-static-asset-handling-branch-vite-static-asset-raw-import.text | A code example demonstrating how to import a static asset as a raw string using the Vite raw suffix. | Exact payloads, commands, or snippets shown in A code example demonstrating how to import a static asset as a raw string using the Vite raw suffix. |
examples/main-vite-static-asset-handling-branch-vite-static-asset-handling-worker.text | A code example demonstrating how to import a web worker as a separate chunk in a Vite production build. | Exact payloads, commands, or snippets shown in A code example demonstrating how to import a web worker as a separate chunk in a Vite production build. |
examples/main-vite-static-asset-handling-branch-vite-static-asset-handling-shared.text | A code example demonstrating how to use a SharedWorker as a static asset within a Vite project. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use a SharedWorker as a static asset within a Vite project. |
examples/main-vite-static-asset-handling-branch-vite-static-asset-handling-base64.text | A code example demonstrating how Vite inlines assets as base64 strings. | Exact payloads, commands, or snippets shown in A code example demonstrating how Vite inlines assets as base64 strings. |
examples/main-vite-static-asset-handling-branch-vite-static-asset-url-import-meta.text | A code snippet demonstrating how to resolve static asset URLs using the new URL constructor with import.meta.url in Vite. | Exact payloads, commands, or snippets shown in A code snippet demonstrating how to resolve static asset URLs using the new URL constructor with import.meta.url in V... |
examples/main-vite-static-asset-handling-branch-vite-static-asset-get-image-url-j.text | A JavaScript function demonstrating how to resolve asset URLs using the new URL constructor and import.meta.url. | Exact payloads, commands, or snippets shown in A JavaScript function demonstrating how to resolve asset URLs using the new URL constructor and import.meta.url. |
examples/main-vite-static-asset-handling-branch-vite-static-asset-url-import-meta-2.text | A code snippet demonstrating how to use the new URL constructor with import.meta.url to reference static assets in Vite. | Exact payloads, commands, or snippets shown in A code snippet demonstrating how to use the new URL constructor with import.meta.url to reference static assets in Vite. |
examples/main-vite-static-asset-handling-branch-vite-static-asset-handling-get-im.text | A JavaScript function demonstrating how to resolve asset URLs using the new URL constructor and import.meta.url. | Exact payloads, commands, or snippets shown in A JavaScript function demonstrating how to resolve asset URLs using the new URL constructor and import.meta.url. |
What This Skill Covers
- Are you an LLM? You can read better optimized documentation at /guide/assets.md for this page in Markdown format
- Main sections:
Importing Asset as URL ,Explicit URL Imports ,Explicit Inline Handling ,Importing Asset as String ,Importing Script as a Worker .
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://main.vite.dev/guide/assets