Complete Guide to Vite Path Aliases in Escrcpy

Escrcpy defines eight Vite path aliases in desktop/vite.config.js that map short prefixes like $, $control, and $electron to absolute source directories, enabling clean imports across renderer windows and main process code.

The open-source Android screen mirroring tool Escrcpy uses Vite to bundle its Electron-based desktop application. Understanding the available Vite path aliases in the viarotel-org/escrcpy repository helps developers navigate the codebase efficiently and write maintainable import statements without deep relative path traversal.

Available Vite Path Aliases in Escrcpy

According to the source code analysis of desktop/vite.config.js (lines 18-27), the following alias mappings are registered in the resolve.alias configuration:

• $ → Resolves to src (base source directory for shared components, composables, and utilities)
• $root → Resolves to . (project root, enabling absolute imports from the repository base)
• $docs → Resolves to docs (documentation source folder)
• $renderer → Resolves to src (alias for renderer source, identical to $)
• $electron → Resolves to electron (main-process and preload code)
• $control → Resolves to pages/control (Control window renderer entry point)
• $explorer → Resolves to pages/explorer (Explorer window renderer entry point)
• $terminal → Resolves to pages/terminal (Terminal window renderer entry point)

These aliases are merged into every build configuration through the central Vite setup, ensuring they remain available across all renderer entry points in desktop/pages/*/.

How the Aliases Are Configured

In desktop/vite.config.js, the alias definitions reside within the resolve property between lines 18 and 27. The configuration registers these mappings through internal plugins located in desktop/src/plugins/internal.js, which inject the resolution rules into each renderer window's build pipeline.

Because the aliases map directly to absolute filesystem paths, Vite resolves them at build time rather than runtime. This approach eliminates the need for relative path traversal (such as ../../../store/device) and prevents broken imports during refactoring.

Practical Usage Examples

The following patterns demonstrate how to leverage Vite path aliases throughout the Escrcpy codebase:

// Import a shared composable from the src directory
import { useDevice } from '$/store/device'

// Import a component from the Control window renderer
import ControlToolbar from '$control/components/Toolbar.vue'

// Load a utility from the Electron main-process code
import { getAdbPath } from '$electron/helpers/adb'

// Access a page-specific component in the Explorer window
import ExplorerTree from '$explorer/components/Tree.vue'

// Reference a document file from the docs folder
import changelog from '$docs/CHANGELOG.md'

Each alias targets a specific architectural layer: $ and $renderer handle shared renderer code, $control, $explorer, and $terminal isolate window-specific modules, while $electron bridges the main process boundary.

Production and Development Compatibility

These Vite path aliases function identically in both development (vite serve) and production (vite build) environments. Since the resolution happens during the build process, the bundler replaces alias references with absolute paths before generating the final JavaScript chunks. This ensures consistent behavior across all build targets without requiring environment-specific configuration changes.

Summary

• Eight distinct aliases are defined in desktop/vite.config.js (lines 18-27) and registered via desktop/src/plugins/internal.js
• $ serves as the primary alias for shared source code, while $renderer provides semantic clarity for the same location
• Window-specific aliases ($control, $explorer, $terminal) map to their respective entry points in desktop/pages/*/
• $electron provides direct access to main-process code without relative path traversal
• Absolute path resolution ensures aliases work consistently across development and production builds

Frequently Asked Questions

Where are Vite path aliases defined in Escrcpy?

The aliases are defined in desktop/vite.config.js between lines 18 and 27 within the resolve.alias configuration array. This configuration is merged into every renderer window's build setup, ensuring consistent resolution across the Control, Explorer, and Terminal windows.

What is the difference between $ and $renderer?

There is no functional difference between these aliases. Both $ and $renderer resolve to the src directory. The $renderer alias exists primarily for semantic clarity, making it explicit when code belongs to the renderer process versus the Electron main process.

Can I use the $electron alias in preload scripts?

Yes. The $electron alias resolves to the electron directory containing the main-process code and preload scripts. You can import shared utilities using patterns like import { helper } from '$electron/utils/helper' in both main and preload contexts.

Do Escrcpy's Vite path aliases require extra configuration for production builds?

No additional configuration is required. Because the aliases map to absolute paths at build time, Vite resolves them correctly during both development (vite serve) and production (vite build). The bundled output contains the resolved absolute paths, ensuring consistent behavior across environments.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}