首页 > 解决方案 > vscode+vetur:从 .js 文件转到定义不起作用

问题描述

我已经安装了 Vetur 并jsconfig.js在我的项目的根目录中有一个文件。这是一个 javascript vue-cli 3 项目。

确实可以从 .vue 文件到另一个 .vue 文件进行定义。

确实可以从 .js 文件到另一个 .js 文件进行定义。

确实可以从 .vue 文件到 .js 文件进行定义。

但,

无法从 .js 文件转到 .vue 文件的定义。当我尝试这样做时,vscode 会打开“转到参考”小部件。

我的内容jsconfig.file

{
  // This file is required for VSCode to understand webpack aliases
  "module": "es6",
  "moduleResolution": "node",
  "compilerOptions": {
    "resolveJsonModule": true,
    "jsx": "preserve",
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,

    "baseUrl": ".",
    // Relative to "baseUrl"
    "paths": {
      "@/*": ["./src/*"],
      "mocks/*": ["./tests/unit/specs/__mocks__/*"],
      "test-e2e/*": ["./tests/e2e/specs/*"],
      "test-unit/*": ["./tests/unit/specs/*"]
    }
  },
  "exclude": [
    ".git",
    ".app-cache",
    ".npm",
    ".npm-tmp",
    "dist",
    "dist*",
    "node_modules",
    "subfolder/dist",
    "subfolder/node_modules",
    "**/dist/*",
    "**/node_modules/*"
  ]
}

我知道GitHub 上有很多与此相关的问题,但所有这些问题似乎都与 typescript 项目有关或仅涉及.vue文件。我找不到任何解决这个特定问题的方法。

我尝试安装“vue peek”扩展,但没有任何改变。

标签: javascriptvue.jswebpackvscode-settingsvetur

解决方案


这不是答案,而是有关该问题的更多信息,因为我也有它,但我不知道如何解决它。

问题似乎是*.vue文件由 Vetur 扩展处理。Vetur 扩展<script>以一种允许它正确解析*.vue文件导入的方式调用 typescript。

但是,*.js文件由打字稿直接处理,打字稿不知道是什么*.vue,它试图通过附加各种默认扩展名来解析它,就好像它是一个没有扩展名的文件名:*.vue.ts, *.vue.tsx,*.vue.js等。这就是为什么它没有找到它。

npx typescript --traceResolution在代码上运行,输出如下:

======== Resolving module './App.vue' from 'src/main.js'. ========
Module resolution kind is not specified, using 'NodeJs'.
Loading module as file / folder, candidate module location 'src/App.vue', target file type 'TypeScript'.
File 'src/App.vue.ts' does not exist.
File 'src/App.vue.tsx' does not exist.
File 'src/App.vue.d.ts' does not exist.
Directory 'src/App.vue' does not exist, skipping all lookups in it.
Loading module as file / folder, candidate module location 'src/App.vue', target file type 'JavaScript'.
File 'src/App.vue.js' does not exist.
File 'src/App.vue.jsx' does not exist.
Directory 'src/App.vue' does not exist, skipping all lookups in it.
======== Module name './App.vue' was not resolved. ========

推荐阅读