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

Question

当我在Vite中使用Vue单文件组件时，我可以使用

baseUrl

和

路径

别名

tsconfig.json

导入

*

.ts文件转换为组件文件。但是，这不适用于导入

*

.vue文件，因为我得到一个运行时错误。

// 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不一致服务器

但是这个问题还没有得到回答。

因此，我的

主要问题

是:如何在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' 
    },
  },
});