快捷導(dǎo)航

Vue3報(bào)錯‘defineProps‘?is?not?defined的解決方法

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

最近工作中遇到vue3中使用defineProps中報(bào)錯,飄紅,所以這篇文章主要給大家介紹了關(guān)于Vue3報(bào)錯‘defineProps‘?is?not?defined的解決方法,需要的朋友可以參考下

前言

2021年結(jié)束了，Vite 的版本也升級了，現(xiàn)在試試新版 Vite 搭建 Vue 項(xiàng)目。

按照 vue3一步一步的詳細(xì)講解配置ESLint 中 vue 官方推薦安裝 ESLint 的方式安裝 Eslint，結(jié)果發(fā)現(xiàn) 'defineProps' is not defined 報(bào)錯，現(xiàn)在來解決這個問題。

環(huán)境

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 的規(guī)則校驗(yàn)，需要在 eslint-plugin-vue官方指南中尋找對應(yīng)配置。

添加對應(yīng)配置即可

修改配置

// .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'
  }
}

結(jié)果新出現(xiàn)了一個報(bào)錯 Environment key "vue/setup-compiler-macros" is unknown

根據(jù)提示可知，是當(dāng)前依賴包 eslint-plugin-vue 中沒有 vue/setup-compiler-macros 規(guī)則，故需升級 eslint-plugin-vue，當(dāng)前最新版本是 8.4.0

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

出現(xiàn)報(bào)錯，安裝最新版本 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”

當(dāng)安裝成功后，Environment key "vue/setup-compiler-macros" is unknown 報(bào)錯問題解決。

最后項(xiàng)目整體就沒報(bào)錯了。

總結(jié)

解決一個問題，可能出現(xiàn)新的待解決問題，都解決后，問題就迎刃而解。

到此這篇關(guān)于Vue3報(bào)錯‘defineProps‘ is not defined的解決方法的文章就介紹到這了,更多相關(guān)Vue3 ‘defineProps‘ is not defined內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: