javascript - Vetur 找不到 package.json

Question

我正在使用 Vue 为我的应用程序编写代码，一切都运行良好。然后我开始创建子组件，我不能再刷新本地主机了。

现在它说：

“Vetur 找不到 'package.json” & “Vetur 找不到 'tsconfig.json' 或 'jsconfig.json”

当我尝试在 cmd 中“npm run serve”时 - 我得到了这个：

C:\Users\cmana\Desktop\WebDeveloper\Vue app\vuetify-todo>npm run serve
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\cmana\Desktop\WebDeveloper\Vue app\vuetify-todo\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\cmana\Desktop\WebDeveloper\Vue app\vuetify-todo\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\cmana\AppData\Roaming\npm-cache\_logs\2021-04-07T12_03_13_953Z-debug.log

根据此https://vuejs.github.io/vetur/guide/setup.html#project-setup - 我尝试使用此内容添加 jsconfig.json 文件。（我删除了所有子组件，所以我只剩下这些 vue 文件（About、Todo、App）。）

{
  "include": [
    "./src/views/About.vue",
    "./src/views/Todo.vue",
    "./src/App.vue"
  ]
}

依然没有。有人有什么想法吗？谢谢<3

score 9 · Accepted Answer

安装 EsLint 扩展程序应该可以解决您的问题

如果你在 VS Code 上，通过发布者搜索 EsLint 扩展：“Dirk Baeumer”，安装它并批准安装以启动 EsLint 服务器

npm install eslint或者在工作区的终端中运行它

package.json 文件被修改，您的服务器将再次启动

有关 EsLint 扩展的更多信息，您可以查看 https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

祝你好运！

score 4 · Accepted Answer

在您的项目之外添加“vetur.config.js” 。

在下面的示例中，“vetur.config.js”被添加到项目“vueProject”之外：

缩小“vueProject”看起来更清晰：

然后，将下面的代码粘贴到“vetur.config.js”：

// vetur.config.js
/** @type {import('vls').VeturConfig} */
module.exports = {
  // **optional** default: `{}`
  // override vscode settings
  // Notice: It only affects the settings used by Vetur.
  settings: {
    "vetur.useWorkspaceDependencies": true,
    "vetur.experimental.templateInterpolationService": true
  },
  // **optional** default: `[{ root: './' }]`
  // support monorepos
  projects: [
    './packages/repo2', // shorthand for only root.
    {
      // **required**
      // Where is your project?
      // It is relative to `vetur.config.js`.
      root: './packages/repo1',
      // **optional** default: `'package.json'`
      // Where is `package.json` in the project?
      // We use it to determine the version of vue.
      // It is relative to root property.
      package: './package.json',
      // **optional**
      // Where is TypeScript config file in the project?
      // It is relative to root property.
      tsconfig: './tsconfig.json',
      // **optional** default: `'./.vscode/vetur/snippets'`
      // Where is vetur custom snippets folders?
      snippetFolder: './.vscode/vetur/snippets',
      // **optional** default: `[]`
      // Register globally Vue component glob.
      // If you set it, you can get completion by that components.
      // It is relative to root property.
      // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
      globalComponents: [
        './src/components/**/*.vue'
      ]
    }
  ]
}

score 2 · Accepted Answer

首先，在 Visual Studio 代码中，键入：

Ctrl+ Shift+p

这个命令，会打开这个窗口

类型：在搜索栏中设置json ，如下所示：

打开第一个选项：“打开设置（JSON） ”。

现在，在 JSON 文件上，在文件"vetur.ignoreProjectWarning": true,末尾添加：

重新启动 Visual Studio Code，你就完成了！

score 1 · Accepted Answer

在 VS 代码中

ctrl + p
打开 setting.json
添加这一行：

  "vetur.ignoreProjectWarning": true,

这将忽略错误。

score 0 · Accepted Answer

在 VS Code 中，如果实际代码位于子文件夹中（例如，您有一个 monorepo），您可以vetur.config.js按如下方式在根目录中添加一个。

module.exports = {
    projects: [
      {
        root: './frontend', // root of your vue project (should contain package.json)
        package: './package.json', // Relative to root property, don't change this.
        tsconfig: './tsconfig.json',  // Relative to root property, don't change this.
      }
    ]
  }

有关详细信息，请参阅Vetur 参考。

javascript - Vetur 找不到 package.json

5 回答 5

Related

Reference