As of August 2023, this approach still works with Vite version 2 and 3. So whenever I mention Vite, I am referring to the version 2 and 3. Let me know if you encounter any problems in the comment section.

Have you ever thought of how to get rid of imports resembling ../../assets/* or ../../../assets/* in your vite project? Well, this article will help you to do just that.

Reasons for Usage

• Simplify referencing the project root.
• Address module resolution errors when modifying files in directories.
• Satisfy your curiosity

Alias Setup

In this guide, I'll use the alias @ to denote the project root. This approach is demonstrated using a React project scaffolded with Vite. The technique can be applied to Vue, AngularJS, or other frameworks supporting TypeScript. Learn how to scaffold a Vite app here.

Follow these steps to set up path aliases for TypeScript and Vite:

Steps to Follow

1. Open your project's tsconfig.json file.
2. Inside the compilerOptions section, add:

   "baseUrl": "src",
   "paths": {
       "@/*": ["./*"]
   }

This informs TypeScript to map module names matching the @/* pattern to src/* at runtime. Note that paths are resolved relative to the baseUrl value of the project.

1. Update your Vite configuration (vite.config.ts) as follows:

   import { defineConfig } from "vite";
   import { resolve } from "path";

   export default defineConfig({
       // ... other configurations
       resolve: {
           alias: {
               "@": resolve(__dirname, "src")
           }
       }
   });

Ensure you've installed @types/node for improved type checking.

1. Before:

   import { useState } from "react";
   import reactLogo from "./asset/react.svg";
   import "./App.css";

After:

   import { useState } from "react";
   import reactLogo from "@/asset/react.svg";
   import "@/App.css";

Your application should continue functioning correctly. Feel free to explore other options. If this guide was useful, let me know by commenting, sharing and giving a thumbs up.