vite使用ts创建的vue3项目,用vscode打开时报错:'./App.vue’文件无法找到
为了排除其它插件影响,先清理vscode缓存:
- 在路径C:\Users\DELL中找到.vscode文件夹,删除;
- 在路径C:\Users\DELL\AppData\Roaming中找到Code文件夹,删除;
3. 安装以下三个插件:
用vscode打开vue项目文件,main.ts内容如下,其中import App from './App.vue’报错,报错内容是:Could not find a declaration file for module ‘./App.vue’. ‘d:/Go/VUE/vue_ts/myproject/src/App.vue’ implicitly has an ‘any’ type.
2. 在自定义vue文件中import其他vue文件时报错ts(2307),Cannot find module ‘@/element-plus/mydialog.vue’ or its corresponding type declarations。如下图:
尝试以下方法:在src文件夹内找到vite-env.d.ts文件,打开后添加以下内容:
declare module "*.vue" {
import type { DefineComponent } from "vue"
const vueComponent: DefineComponent<{}, {}, any>
export default vueComponent
}
添加之后如下图:
使用上面的方法后,错误报警消失了。但是会出现一个新的问题,如果引入了不存在的vue文件, 编译器却不会提示报错 ,只有在npm run 的时候报错,是为什么?
从网上找到了如下的解答:地址
也就是说,添加以上语句后,无论vue文件是否存在,vscode都不会报错,那么vscode提示的意义何在呢?所以改用其它方法(vite创建项目时默认也没有上面这段代码)。
解决方式:
在项目根目录找到tsconfig.json文件,在"compilerOptions"项内部添加如下代码:
"compilerOptions": {
...............
// "noImplicitAny": false,
// "allowJs": true,
/* paths */
// "baseUrl": "./", // As of TypeScript 4.1, baseUrl is no longer required to be set when using paths.
"paths": {
"@/*": ["./src/*"] // 这里需要配置
}
}
以上修改后,vscode中已经没有报错了。
如果运行时报错:Failed to resolve import “@/xxx/xxx.vue” from “src/router/router.ts”. Does the file exist? 解决方法如下:
方法一:
在项目根目录找到vite.config.ts文件,添加如下代码:
import { fileURLToPath, URL } from 'node:url' /* 新增内容 */
export default defineConfig({
plugins: [vue()],
resolve: {
/* 新增内容 */
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
方法二:
- 安装path包,命令是 :npm install -g path
- 在项目根目录找到vite.config.ts文件,添加如下代码:
import { resolve } from 'path' /* 新增内容 */
export default defineConfig({
plugins: [vue()],
resolve: {
/* 新增内容 */
alias:{
'@':resolve('src')
}
},
解决’./App.vue’文件无法找到,打开App.vue文件,在setup处添加lang=“ts”,如下:
<script setup lang="ts">