[vite] Vite Alias

在使用 Vite 開發專案時，要是 import 的檔案路徑太多層，可以使用 Alias 來解決此問題。

假設我在 Posts.jsx 要引入 apiSlice.js 這隻檔案，而我的檔案結構長這樣：

則在 Posts.jsx 需這樣寫：

Posts.jsx

import { useGetAllPostsQuery } from "../store/subFolder1/subFolder2/apiSlice";

如果覺得路徑太冗長，則可以在 vite.config.js 檔案內去設定 Alias。

意思是，當我們輸入 @api 時，它的路徑為 src/store/subFolder1/subFolder2/ ，所以如果要引入 apiSlice.js 這隻檔案的話，只要寫成 @api/apiSlice 即可。

vite.config.js

import { defineConfig } from "vite";import react from "@vitejs/plugin-react";import path from "path";// https://vitejs.dev/config/export default defineConfig({  plugins: [react()],  resolve: {    alias: [      {        find: "@api",        replacement: path.resolve(          __dirname,          "src/store/subFolder1/subFolder2/"        ),      },    ],  },});

Posts.jsx

import { useGetAllPostsQuery } from "@api/apiSlice";