如何在 Vite 中的 *.vue 组件导入中使用路径别名？

Question

当我在 Vite 中使用 Vue 单文件组件时，我可以在 [ 中使用 baseUrl 和 path 别名tsconfig.json 将 *.ts 文件导入到组件文件中。但是，这同样不适用于 *.vue 文件的导入，因为我收到运行-time 错误。

// ts files: works fine
import { FooModel } from "@/models/FooModel"

// vue files: relative path works fine
import { FooComponent } from "./models/FooComponent.vue"

// vue files: path alias gives a run-time error!
import { FooComponent } from "@/models/FooComponent.vue"

Vite.js Discord Server上也有类似的问题，但还没有人回答。

因此，我的主要问题是：如何在 Vite 中获取用于单个文件组件导入的路径别名？

子问题是谁在Vite中解析*.vue文件的路径？使用 Vue CLI，这是在 webpack 中处理的，如果我没记错的话，那么在 Vite 中它是汇总？

Answer 1

试试这个！

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src") // map '@' to './src' 
    },
  },
});

如何在 Vite 中的 *.vue 组件导入中使用路径别名？

How can one use a path alias in *.vue component imports in Vite?

vue.js

vite