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",
  },
};

#

Answer 1

考慮使用

• .eslintrc.cjs
#

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

以及僅為這些檔案設定 compilerOptions.types: ["node"]

TS 選項。

---

它可能是這樣的：

• .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"]
  }
}

###

Answer 2

將其加入到 .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",
  },
};

您可以加入任何這些價值觀