Vue.js 如何在Vite中的*.vue组件导入中使用路径别名?
在Vite中使用Vue单文件组件时,我可以使用tsconfig.json中的baseUrl和路径别名将*.ts文件导入组件文件。但是,导入*.vue文件时也不适用,因为我遇到了运行时错误Vue.js 如何在Vite中的*.vue组件导入中使用路径别名?,vue.js,vitejs,Vue.js,Vitejs,在Vite中使用Vue单文件组件时,我可以使用tsconfig.json中的baseUrl和路径别名将*.ts文件导入组件文件。但是,导入*.vue文件时也不适用,因为我遇到了运行时错误 // ts files: works fine import { FooModel } from "@/models/FooModel" // vue files: relative path works fine import { FooComponent } from "./
// 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中为单个文件组件导入工作
子问题是谁在Vite中解析*.vue文件的路径?如果我没有弄错的话,使用Vue CLI,这是在webpack中处理的,所以它是汇总的?试试这个
// 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.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'
},
},
});