首页 前端知识 vue3 vite ts:使用@符号,实现定位在src目录下。(.vue文件无法使用@,import其他模块)

vue3 vite ts:使用@符号,实现定位在src目录下。(.vue文件无法使用@,import其他模块)

2024-07-27 22:07:58 前端知识 前端哥 896 392 我要收藏

情况说明:在.vue后缀的文件中,引入ts文件,使用’@/xxx/xxx/xxx’报错找不到相应类型声明

解决办法:需要在默认生成的配置文件中,添加如下设置。
第一步:找到文件工程目录下的tsconfig.json文件,在CompilerOptions中加上baseUrl和paths两个参数。

 {
 	"CompilerOptions": {
 		//解析非相对模块的基础地址,默认是当前目录
 		"baseUrl": "./",
 		//路径映射,相对于baseUrl
 		"paths": {
 			"@/*": ["./src/*"]
 		},
 	}
 }

第二步:找到文件工程目录下的vite.config.ts文件。加入如下内容
1、导入import path

import path from 'path'

2、defineConfig添加如下内容

resolve: {
	alias: {
		'@': path.resolve(__dirname, 'src')
	}
}

最后vite.config.ts文件全部内容如下:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path'

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

这时候就可以正常使用@符号啦,这里@符号是设置的src文件目录下,如有需要可以修改。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14414.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!