提示
我在做vue3+vite+ts项目的时候,在配置别名这一步的时候遇到了一个问题,使用@引入会报错,如下图所示。
但不影响项目运行;
注意!!!!
我也不清楚是不是版本问题
我看了20篇文章, 皆是在 vite.config.ts 和 tsconfig.json 文件中修改配置
但我修改这两个文件是不生效的 ,
以下有环境配置和项目依赖配置 请做对比
项目环境配置,依赖配置
1. 环境配置
Node.js —— 20.15.0
npm —— 10.7.0
pnpm —— 9.7.0
2. 项目依赖配置
"dependencies": {
"vue": "^3.4.35"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.2",
"typescript": "^5.5.3",
"vite": "^5.4.0",
}
解决方案
1. 修改vite.config.ts中配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve("./src"),
},
},
});
import path from ‘path‘ 有波浪线警告解决办法
pnpm i @types/node -D
@types/node": "^20.14.5",
建议使用pnpm安装types/node 20.14.5版本,
我使用npm 安装不了types/node,一直安装报错
2. 修改 tsconfig.app.json中配置
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
最终结果
1. 有了src文件下文件提示
2. 不在提示报错, .vue后缀必写,不想写的可以去找一下配置,
漫长学习路 步步向前行