vite · Vite Docs
Vite Vite Static Asset Handling
Explains how Vite processes static assets, including importing files via URL, handling public directory assets, and managing asset URLs in CSS.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Vite Vite Static Asset Handling
Explains how Vite processes static assets, including importing files via URL, handling public directory assets, and managing asset URLs in CSS.
When To Use
Use when you need to import images or files into your JavaScript modules, reference assets in your CSS, or manage files that should not be processed by Vite via the public directory.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/vite-static-asset-handling-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/vite-static-asset-handling-vite-static-asset-import-javascript.text | A JavaScript code snippet demonstrating how to import and assign a static image URL to an 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 an element's source attribute... |
examples/vite-static-asset-handling-vite-static-asset-import-javascript-2.text | A JavaScript code snippet demonstrating how to import an SVG asset and apply it to an element's background style using Vite. | Exact payloads, commands, or snippets shown in A JavaScript code snippet demonstrating how to import an SVG asset and apply it to an element's background style usin... |
examples/vite-static-asset-handling-vite-static-asset-import-url.text | An example demonstrating how to import a static asset URL using the ?url suffix in Vite. | Exact payloads, commands, or snippets shown in An example demonstrating how to import a static asset URL using the ?url suffix in Vite. |
examples/vite-static-asset-handling-import-svg-no-inline.text | An example demonstrating how to import an SVG asset in Vite using the no-inline query parameter. | Exact payloads, commands, or snippets shown in An example demonstrating how to import an SVG asset in Vite using the no-inline query parameter. |
examples/vite-static-asset-handling-vite-static-asset-raw-import-glsl.text | An example demonstrating how to use the Vite raw import suffix to import a GLSL shader file as a string. | Exact payloads, commands, or snippets shown in An example demonstrating how to use the Vite raw import suffix to import a GLSL shader file as a string. |
examples/vite-static-asset-handling-worker-separate-chunk.text | A code example demonstrating how to create a separate chunk for a web worker in a Vite production build. | Exact payloads, commands, or snippets shown in A code example demonstrating how to create a separate chunk for a web worker in a Vite production build. |
examples/vite-static-asset-handling-sharedworker.text | A text example demonstrating the implementation of a SharedWorker within the context of Vite static asset handling. | Exact payloads, commands, or snippets shown in A text example demonstrating the implementation of a SharedWorker within the context of Vite static asset handling. |
examples/vite-static-asset-handling-base64-inlining.text | A text example demonstrating how Vite inlines small assets as base64 strings. | Exact payloads, commands, or snippets shown in A text example demonstrating how Vite inlines small assets as base64 strings. |
examples/vite-static-asset-handling-vite-static-asset-url-import-meta-javascript.text | A JavaScript 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 JavaScript code snippet demonstrating how to resolve static asset URLs using the new URL constructor with import.me... |
examples/vite-static-asset-handling-get-image-url-javascript.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/vite-static-asset-handling-vite-static-asset-url-import-meta-javascript-2.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/vite-static-asset-handling-get-image-url-javascript-2.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://vite.dev/guide/assets