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
- Open your project's
tsconfig.json
file. - 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.
- 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.
- 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.
Top comments (0)