From ae5029e1d79c8532a747ccf63d157c147f28e3ff Mon Sep 17 00:00:00 2001 From: Mingyang Zhang <2514765066@qq.com> Date: Fri, 21 Aug 2026 12:36:47 +0800 Subject: [PATCH] docs(vite): explain renderer base path Added information about the renderer base path for Vite in Electron Forge, including usage of import.meta.env.BASE_URL and best practices for referencing assets. --- config/plugins/vite.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/config/plugins/vite.md b/config/plugins/vite.md index 6a7f384..6849f3b 100644 --- a/config/plugins/vite.md +++ b/config/plugins/vite.md @@ -118,6 +118,24 @@ Your `main` entry in your `package.json` file needs to point at `".vite/build/ma If using the Vite template, this should be automatically set up for you. +### Renderer base path + +Electron Forge sets Vite's [`base`](https://vitejs.dev/config/shared-options.html#base) option to `./` for renderer builds. A packaged renderer is loaded from a local `file://` URL rather than a web server, so relative asset URLs keep generated scripts, styles, and public assets inside the renderer's output directory. Overriding `base` with `/` makes those URLs resolve from the root of the filesystem and can cause the packaged window to load without its UI. + +When referencing files from Vite's [`public` directory](https://vitejs.dev/guide/assets.html#the-public-directory), use [`import.meta.env.BASE_URL`](https://vitejs.dev/guide/env-and-mode.html#built-in-constants) in JavaScript, TypeScript, or JSX so the URL follows the configured base path: + +```jsx +My logo +``` + +In a static HTML file, use an explicitly relative URL: + +```html +My logo +``` + +Avoid root-relative URLs such as `/my-logo.png`. They can work against the development server but fail after the app is packaged. + ## Advanced configuration ### Build concurrency