# Complete Guide to Vite Path Aliases in Escrcpy

> Discover the eight Vite path aliases in escrcpy, like $ and $control, that simplify imports across your project for cleaner code.

- Repository: [viarotel-org/escrcpy](https://github.com/viarotel-org/escrcpy)
- Tags: how-to-guide
- Published: 2026-09-10

---

**Escrcpy defines eight Vite path aliases in [`desktop/vite.config.js`](https://github.com/viarotel-org/escrcpy/blob/main/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`](https://github.com/viarotel-org/escrcpy/blob/main/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`](https://github.com/viarotel-org/escrcpy/blob/main/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`](https://github.com/viarotel-org/escrcpy/blob/main/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:

```javascript
// 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`](https://github.com/viarotel-org/escrcpy/blob/main/desktop/vite.config.js) (lines 18-27) and registered via [`desktop/src/plugins/internal.js`](https://github.com/viarotel-org/escrcpy/blob/main/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`](https://github.com/viarotel-org/escrcpy/blob/main/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.