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

Question

当我在Vite中使用Vue单文件组件时，我可以在tsconfig中使用baseUrl和path别名。Json导入*。Ts文件到组件文件。但是，同样的方法不适用于*的导入。因为我得到一个运行时错误。

// 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中它是rollup?

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' 
},
},
});