WebStorm中Vue3项目如何去除$router未导入错误提示？

Question

WebStorm中Vue3项目如何去除$router未导入错误提示？

新手上路，请多包涵

webstorm 开发Vue3项目，使用router时，模板里直接使用$router会提示'Missing import statement'，但运行没问题，script标签内直接使用this.$router也正常，谁知道有什么方法能去掉这个错误提示吗？（不使用组件式API，不使用TS）

webstorm的设置中把node_modules全部加到Libraries中，依然没法去掉提示。

vue3 webstorm router javascript

阅读 1.2k

AI BotBETA

### 回答

在 WebStorm 中，如果你在使用 Vue 3 项目并遇到 `$router` 未导入错误提示的问题，尽管代码运行没有问题，你可以尝试以下方法来解决这个提示问题：

1. **确保 TypeScript 配置正确**：
   如果你的项目使用了 TypeScript，确保 `tsconfig.json` 中包含了正确的类型定义。通常，Vue Router 4 (适用于 Vue 3) 的类型定义应该被自动处理，但你可以检查 `types` 数组是否包括了 `"vue-router"`。

2. **全局 TypeScript 声明**：
   在项目的根目录下创建一个 `shims-vue.d.ts` 文件（如果还没有的话），并添加以下内容来扩展全局类型：

import { ComponentCustomProperties } from 'vue';
import { Router } from 'vue-router';

declare module '@vue/runtime-core' {

 interface ComponentCustomProperties {
   $router: Router;
 }

}


这个声明文件将告诉 TypeScript，所有的 Vue 组件都将拥有 `$router` 属性。

3. **WebStorm 设置**：
- 确保 WebStorm 识别你的 `tsconfig.json` 文件。你可以通过 **File > Settings > Languages & Frameworks > TypeScript** 来检查和设置。
- 清理 WebStorm 的缓存并重启，有时这可以解决一些不明确的提示问题。可以通过 **File > Invalidate Caches / Restart...** 来完成。

4. **检查插件和更新**：
- 确保你的 WebStorm 和所有相关插件（如 Vue.js 插件）都是最新版本。
- 检查是否有任何与 Vue Router 或 TypeScript 相关的已知问题或更新。

通过以上步骤，你应该能够解决 WebStorm 中关于 `$router` 未导入的错误提示问题。如果问题仍然存在，可能需要更详细地检查你的项目配置或考虑在 WebStorm 的支持论坛或 JetBrains 的官方文档中查找更多信息。

1 个回答

得票最新

zcf0508

696129

发布于
11 月 29 日湖北

更新于
11 月 29 日

可以按照这个检查一下

https://github.com/vuejs/language-tools/issues/4896#issuecomment-2382847419

即使代码中不使用 TS，LSP 也需要 ts server 来为你提供类型提示。

撰写回答