Modul tidak ditakrifkan dalam projek Vue

Question

Saya baru sahaja menjalankannya melalui npm init vue@latest 创建了一个新的 Vue 应用程序，如官方文档中指定的那样。然后我尝试按照 Vue 和 Vite 网站上的指南将 Tailwind 添加到我的应用程序中。但是，当打开文件 tailwind.config.js 时，我注意到 ESLint 告诉我 module 未定义，并且 module.exports Sintaks tidak berfungsi.

Kenapa ni? Bagaimana saya boleh menyelesaikannya?

Edit: Fail lalai .eslintrc.cjs yang dibuat oleh Vue kelihatan seperti ini:

/* 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

Pertimbangkan untuk menggunakan

• .eslintrc.cjs

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

dan tetapkan pilihan compilerOptions.types: ["node"] TS hanya untuk fail ini.

---

Ia mungkin kelihatan seperti ini:

• .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

Tambahkannya pada .eslintrc.cjs

env: {
  node: true,
},

Jadi fail anda kelihatan seperti

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

Anda boleh menambah mana-mana daripada nilai

ini