Vue 项目中未定义模块答案

【问题标题】：module not defined in Vue ProjectVue 项目中未定义模块
【发布时间】：2023-02-21 05:37:54
【问题描述】：

我刚刚通过运行 npm init vue@latest 中指定的 official documentation 创建了一个新的 Vue 应用程序。然后我尝试通过关注他们网站上的 guide for 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",
  },
};

【问题讨论】：

您需要分享更多信息，在您的问题中包含您的.eslintrc.js。
我编辑了我的问题。另外：Vue 创建了一个 .eslintrc.cjs 而不是 .js 文件。那是问题所在吗？

标签： vue.js node-modules tailwind-css

【解决方案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",
  },
};

您可以添加任何 these 值

【讨论】：

【解决方案2】：

考虑使用

.eslintrc.cjs

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

以及仅为这些文件设置 compilerOptions.types: ["node"] TS 选项。

这是必要的以确保我没有在源代码中使用 Node JS API，也没有在其上使用 polyfill。

这就是它的样子：

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

【讨论】：