Vue3搭配vue-property-decorator出现Super expression相关报错如何解决

错误根因 #

vue-property-decorator 是仅适配 Vue2.x 版本的装饰器工具库，其导出的Vue基类基于 Vue2 构造函数实现，和 Vue3 的架构逻辑完全不兼容，因此在 Vue3 项目中直接引入会触发「Super expression must either be null or a function」报错。

推荐解决方案：替换为 Vue3 适配的装饰器库 #

Vue3 生态下推荐使用vue-facing-decorator作为类装饰器方案，该库完全兼容 vue-property-decorator 的 API，迁移成本极低。

操作步骤 #

• 卸载原有的不兼容库

npm uninstall vue-property-decorator

• 安装 Vue3 适配的装饰器库

npm install vue-facing-decorator

• 修改组件导入路径，原有业务逻辑不需要任何改动

<template>
   <div>Hi</div>
</template>

<script lang="ts">
import { Vue, Prop } from "vue-facing-decorator";

export default class App extends Vue {
   @Prop(Number) readonly propA: number | undefined;
   @Prop({ default: "default value" }) readonly propB!: string;
   @Prop([String, Boolean]) readonly propC: string | boolean | undefined;
}
</script>

• 确认tsconfig.json开启装饰器支持

确保配置文件的compilerOptions字段存在以下配置：

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

• 原有main.ts代码无需修改，直接启动项目即可正常运行。

备选方案：降级为 Vue2 项目 #

如果必须继续使用 vue-property-decorator，可在 Vue CLI 创建项目时选择 Vue2 版本，重新构建项目即可。

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