如何在vite React中设置多个别名？

Question

Vite默认不支持src别名

import counterReducer from "@src/pages/counter/counter.slice";

每次你都必须像这样传递完整的相对路径

import counterReducer from "../../src/pages/counter/counter.slice";

有什么办法可以缩短这些相对路径吗？

Answer 1

是的，vite 没有默认配置别名，但您可以定义自己的别名。

步骤： 1 打开“vite.config.js”并添加您的别名。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src/"),
      components: `${path.resolve(__dirname, "./src/components/")}`,
      public: `${path.resolve(__dirname, "./public/")}`,
      pages: path.resolve(__dirname, "./src/pages"),
      types: `${path.resolve(__dirname, "./src/@types")}`,
    },
  },
});

步骤 2：打开 tsconfig.json 或 jsconfig.json 并将此代码附加到编译器选项下。

"baseUrl": ".",
"paths": {
  "@/*": ["./src/*", "./dist/*", ""],
  "pages/*": ["src/pages/*"],
  "components/*": ["src/components/*"],
  "types/*": ["src/@types/*"],
  "public/*": ["public/*"]
}