Ionic/Vue使用$ref/$computed时vue/macros.d.ts报错如何解决

ERROR in ./node_modules/vue/macros.d.ts 是Vue 3.2早期版本实验性响应性语法糖的兼容问题：你使用的3.2.21版本中$ref、$computed这类宏属于未稳定的实验特性，vue/macros路径的类型声明存在解析缺陷，加上@ionic/vue 6.0.0默认构建配置没有开启宏转译支持，手动导入宏就会直接触发构建报错。

优先选择第一种方案，稳定性最好：

• 方案1：升级依赖+正确配置（推荐）

  1. 升级Vue到3.3及以上稳定版本，这个版本已经修复了macros路径的类型问题，和Ionic/Vue 6的构建链完全兼容，执行安装命令：
     npm install vue@^3.3.4
  2. 删掉代码里手动导入宏的语句：import { $computed } from "vue/macros";，$ref、$computed这类编译宏不需要手动导入，开启配置后全局可用。
  3. 按项目使用的构建工具开启响应性宏支持：
     如果是Vite创建的Ionic项目，修改vite.config.ts：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [
      vue({
        reactivityTransform: true
      })
    ]
  })
  

  如果是Vue CLI创建的项目，修改vue.config.js：

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

  4. 如果升级后TS提示找不到$ref、$computed类型，在项目的全局类型声明文件（一般是src/env.d.ts）里加一行：
     /// <reference types="vue/macros-global" />
     重启开发服务后报错就会消失。

• 方案2：锁3.2.21版本临时修复
  如果暂时不能升级Vue版本，先修改tsconfig.json添加排除规则，跳过有问题的类型声明文件解析：

  {
    "exclude": ["node_modules/vue/macros.d.ts"]
  }
  

  后续和方案1一样，删掉手动导入宏的语句，在构建配置里开启reactivityTransform: true，重启服务即可。

• 所有响应性编译宏都不需要手动import，手动从vue/macros导入是触发这类报错的最常见原因。
• ESLint如果提示宏未定义，在.eslintrc.js的globals配置里加上$ref: readonly、$computed: readonly即可，不需要额外安装依赖。

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