Vue <script setup>无需导入却无法使用defineProps和defineEmits问题求助

defineProps、defineEmits 属于 <script setup> 专属的编译器宏，本身不需要手动导入，出现未定义报错分为两种场景，对应解决方案如下：

场景1：仅IDE/ESLint校验报错，项目实际运行正常 #

这类报错是代码校验工具无法识别编译器宏导致的，解决方法：

• 升级VSCode的Volar插件到最新正式版，新版默认已支持上述宏的全局识别
• 若使用ESlint校验，安装 ≥8.0.0版本的eslint-plugin-vue，并修改ESlint配置文件：

// .eslintrc.js 或对应ESlint配置文件
module.exports = {
  extends: [
    'plugin:vue/vue3-recommended'
  ],
  rules: {
    // 开启script setup变量识别规则
    'vue/script-setup-uses-vars': 'error'
  },
  // 直接声明宏为全局只读变量，避免no-undef报错
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }
}

场景2：项目编译/运行阶段直接抛出未定义错误 #

这类报错是当前使用的beta版vue-cli存在兼容性问题导致的，解决方法：

1. 优先升级@vue/cli到5.0及以上正式版，beta测试版存在<script setup>相关的兼容bug，正式版已修复
2. 若暂时无法升级cli，先删除本地node_modules、package-lock.json或yarn.lock文件，重新安装依赖，保证@vue/compiler-sfc版本和本地vue版本（3.2.19）完全一致
3. 也可以临时修改vue.config.js配置开启兼容支持：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.experimentalInlineMatchResource = true
        return options
      })
  }
}

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