Vue项目中模块未定义。

Question

我刚刚按照官方文档中的指示，通过运行npm init vue@latest创建了一个新的Vue应用程序。然后，我尝试按照他们网站上的Vue＆Vite指南将Tailwind添加到我的应用程序中。但是，当我打开tailwind.config.js文件时，我注意到ESLint告诉我module未定义，并且module.exports语法不起作用。

为什么会这样，我该如何修复？

编辑：Vue创建的默认.eslintrc.cjs文件如下：

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
};

- muell

---

你需要分享更多信息，包括你的.eslintrc.js文件在你的问题中。 - Lissy93

我编辑了我的问题。另外，Vue创建了一个.eslintrc.cjs而不是.js文件。这是问题吗？ - muell

Answer 1

将以下内容添加到.eslintrc.cjs中。

env: {
  node: true,
},

所以你的文件看起来像这样

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
};

您可以添加任何这些值

（翻译：您可以添加此链接列出的任何值）

- Ihar Aliakseyenka

---

另外，您也可以在受影响的文件中使用注释/* eslint-env node */。这只是一种基于每个文件的变体，与已接受的答案类似，但我想提及它以完整起见。 - muell

@muell 确认无误。欢迎您编辑答案。 - Ihar Aliakseyenka

Answer 2

考虑使用

• .eslintrc.cjs

  …
    overrides: [
      {
        files: ["{vue,vite}.config.*"],
        env: {
          node: true,
        },
      },
    ],
  

还需要设置compilerOptions.types: ["node"] TS选项，仅针对这些文件。

这是必要的，以确保我没有在源代码中使用NodeJS API并且不会拉取其Polyfills。

---

以下是示例：

• .eslintrc.cjs

  /* eslint-env node */
  require("@rushstack/eslint-patch/modern-module-resolution");
  
  module.exports = {
    root: true,
    extends: [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/eslint-config-typescript",
      "@vue/eslint-config-prettier",
    ],
    overrides: [
      {
        files: ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
        extends: ["plugin:cypress/recommended"],
      },
      {
        files: ["{vue,vite}.config.*"],
        env: {
          node: true,
        },
      },
    ],
    parserOptions: {
      ecmaVersion: "latest",
    },
  };
  

• tsconfig.config.json

  {
    "extends": "@vue/tsconfig/tsconfig.node.json",
    "include": ["vue.config.*", "vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
    "compilerOptions": {
      "composite": true,
      "types": ["node"]
    }
  }
  

- D. Naumov