【Vue3】解决‘defineProps‘ is not defined报错

harmsworth2016

已于 2022-06-01 19:27:22 修改

阅读量4w

点赞数 20

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-02-02 20:53:45 首次发布

本文链接：https://blog.csdn.net/harmsworth2016/article/details/122771816

版权

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文档介绍了在Vue3和Vite2环境下，遇到'defineProps'isnotdefined错误的解决过程。首先，作者展示了项目的环境配置，包括Vite和Vue的版本。接着，提供了ESLint的配置文件，并指出问题在于缺少Vue3的规则校验。通过查阅资料，作者添加了相应的配置项，但随后又遇到了Environmentkeyvue/setup-compiler-macrosisunknown的报错。为解决此问题，作者升级了eslint-plugin-vue到最新版本，但因Node版本不兼容导致新问题。更新Node版本后，所有问题得以解决。总结中强调了解决一个问题可能引发新问题，但最终都能找到解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

2021年结束了，Vite 的版本也升级了，现在试试新版 Vite 搭建 Vue 项目。
按照 vue3一步一步的详细讲解配置ESLint 中 vue 官方推荐安装 ESLint 的方式安装 Eslint，结果发现 'defineProps' is not defined 报错，现在来解决这个问题。
在这里插入图片描述

环境

vite 2.7.2
vue 3.2.25

配置

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

安装 ESlint 后

// package.json
{
  "name": "my-vue-app1",
  "version": "0.0.0",
  "scripts": {
    "build": "vite build",
    "lint": "vue-cli-service lint",
    "dev": "vite",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "vite": "^2.7.2"
  }
}

定位问题

defineProps 属于 Vue3 的规则校验，需要在 eslint-plugin-vue官方指南中寻找对应配置。
在这里插入图片描述
添加对应配置即可

修改配置

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    'vue/setup-compiler-macros': true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

结果新出现了一个报错 Environment key "vue/setup-compiler-macros" is unknown
在这里插入图片描述
根据提示可知，是当前依赖包 eslint-plugin-vue 中没有 vue/setup-compiler-macros 规则，故需升级 eslint-plugin-vue，当前最新版本是 8.4.0

 yarn upgrade eslint-plugin-vue@8.4.0 -D
 # OR
 npm update --save-dev eslint-plugin-vue@8.4.0

出现报错，安装最新版本 node 即可解决。
在这里插入图片描述

eslint-plugin-vue@8.4.0: The engine “node” is incompatible with this module. Expected version “^12.22.0 || ^14.17.0 || >=16.0.0”. Got “14.15.0”

当安装成功后，Environment key "vue/setup-compiler-macros" is unknown 报错问题解决。
在这里插入图片描述

最后项目整体就没报错了。

总结

解决一个问题，可能出现新的待解决问题，都解决后，问题就迎刃而解。