Vue3报错‘defineProps‘ is not defined的解决方法

更新时间：2023年01月16日 11:44:21 作者：harmsworth2016

最近工作中遇到vue3中使用defineProps中报错,飘红,所以这篇文章主要给大家介绍了关于Vue3报错‘defineProps‘ is not defined的解决方法,需要的朋友可以参考下

前言

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 报错问题解决。

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

总结

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

到此这篇关于Vue3报错‘defineProps‘ is not defined的解决方法的文章就介绍到这了,更多相关Vue3 ‘defineProps‘ is not defined内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中data和data()的区别说明
这篇文章主要介绍了vue中data和data()的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue实现图片路径转二进制文件流(binary)
这篇文章主要介绍了vue实现图片路径转二进制文件流(binary)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
部署vue+Springboot前后端分离项目的步骤实现
这篇文章主要介绍了部署vue+Springboot前后端分离项目的步骤实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
vue 避免变量赋值后双向绑定的操作
这篇文章主要介绍了vue 避免变量赋值后双向绑定的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue头像处理方案小结
这篇文章主要介绍了Vue头像处理方案，实现思路主要是通过获取后台返回头像url，判断图片宽度，高度。具体实例代码大家参考下本文
2018-07-07
vue3 onMounted异步函数同步请求async/await实现
这篇文章主要为大家介绍了vue3 onMounted初始化数据异步函数/同步请求async/await实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
在Vue中使用Immutable.js的步骤
这篇文章主要介绍了在Vue中使用Immutable.js的步骤，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09
VUE脚手架框架编写简洁的登录界面的实现
本文主要介绍了VUE脚手架框架编写简洁的登录界面的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程
这篇文章主要介绍了vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
Vue中nvm-windows的安装与使用教程(亲测)
nvm全英文也叫node.js version management，是一个nodejs的版本管理工具，这篇文章主要介绍了Vue中nvm-windows的安装与使用,需要的朋友可以参考下
2023-02-02