如何在TypeScript项目中配置vue.config.js解决require语法报错问题

该报错由TypeScript ESLint规则@typescript-eslint/no-var-requires触发，此规则默认禁止TS项目使用CommonJS规范的require导入语法，要求统一使用ES Module的import语法，可选择以下任意方案修复：

方案1：改用ES Module导入语法（推荐） #

直接调整vue.config.js的语法为ES Module规范，修改后代码如下：

import webpack from "webpack";

export default {
  plugins: [
    new webpack.DefinePlugin({
      __VUE_I18N_FULL_INSTALL__: true,
      __VUE_I18N_LEGACY_API__: false,
      __VUE_I18N_PROD_DEVTOOLS__: false,
      __INTLIFY_PROD_DEVTOOLS__: false,
    }),
  ],
};

如果你的Node.js版本低于14.13.0，或是项目package.json中未配置"type": "module"，可选择其他方案。

方案2：针对vue.config.js关闭对应ESLint规则 #

无需修改原有配置语法，仅跳过该文件的no-var-requires规则检查即可：

• 单文件跳过：在vue.config.js的首行添加规则禁用注释

/* eslint-disable @typescript-eslint/no-var-requires */
const webpack = require("webpack");
// 后续原有代码保持不变即可

• 全局配置跳过：修改项目根目录下的.eslintrc配置文件，添加文件级规则覆盖

{
  "overrides": [
    {
      "files": ["vue.config.js"],
      "rules": {
        "@typescript-eslint/no-var-requires": "off"
      }
    }
  ]
}

方案3：改用TS格式的配置文件 #

将vue.config.js重命名为vue.config.ts，使用TypeScript语法编写配置：

import type { Configuration } from "@vue/cli-service";
import webpack from "webpack";

const config: Configuration = {
  plugins: [
    new webpack.DefinePlugin({
      __VUE_I18N_FULL_INSTALL__: true,
      __VUE_I18N_LEGACY_API__: false,
      __VUE_I18N_PROD_DEVTOOLS__: false,
      __INTLIFY_PROD_DEVTOOLS__: false,
    }),
  ],
};

export default config;

使用该方案前需确保项目已安装@types/webpack等相关类型依赖。

内容的提问来源于stack exchange，提问作者Serio