Vue.js 3 CLI集成WordPress时theme_mx_data未定义报错如何解决？

这个报错是ESLint在校验阶段无法识别WordPress运行时注入的全局变量导致的，和你实际运行逻辑无关，可通过以下几种方式解决，按推荐优先级排序：

方案1：配置ESLint全局变量（最推荐） #

在你的Vue项目根目录下找到ESLint配置文件（通常为.eslintrc.js、.eslintrc.json或.eslintrc），添加globals字段声明该全局变量：

// .eslintrc.js 示例
module.exports = {
  // 保留你原有的所有ESLint配置，仅新增下面的globals字段
  globals: {
    theme_mx_data: "readonly"
  }
}

如果仅需要在单个文件中生效，不需要修改全局配置，可直接在用到theme_mx_data的文件的script标签顶部添加声明注释：

/* global theme_mx_data */
// 后面是你原有的业务代码

方案2：通过window对象访问全局变量 #

因为WordPress注入的变量是挂载在浏览器全局window对象上的，直接通过window.theme_mx_data访问即可规避ESLint的未定义校验，你的原有代码可修改为：

set_mx_data() {
  let theme_data = {}
  if( typeof window.theme_mx_data !== "undefined" ) {
    theme_data = window.theme_mx_data
  }
  this.mx_data = theme_data
}

该方案无需修改任何ESLint配置，改动量最小。

方案3：临时禁用对应行的ESLint校验 #

如果仅为临时调试使用，可在报错的代码行前添加禁用规则的注释：

set_mx_data() {
  let theme_data = {}
  // eslint-disable-next-line no-undef
  if( typeof theme_mx_data !== "undefined" ) {
    // eslint-disable-next-line no-undef
    theme_data = theme_mx_data
  }
  this.mx_data = theme_data
}

注意：该方案会屏蔽对应行的未定义变量校验，不推荐长期使用，避免漏过其他真实的变量未定义错误

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