You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vue3使用vue-facing-decorator时@Component触发语法错误求助

Vue3集成vue-facing-decorator后装饰器报语法错误

在Vue3项目中集成vue-facing-decorator后,启动开发服务器时控制台抛出Uncaught SyntaxError: Invalid or unexpected token错误,错误位置指向@Component装饰器。已在TypeScript配置中添加"experimentalDecorators": true,且查阅了vue-facing-decorator官方文档,但问题仍未解决。

package.json 配置

{
  "type": "module",
  "dependencies": {
    "pinia": "^2.2.6",
    "vue": "^3.5.12",
    "vue-facing-decorator": "^3.0.4",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@tsconfig/node22": "^22.0.0",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^22.9.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vitejs/plugin-vue-jsx": "^4.0.1",
    "@vitest/eslint-plugin": "1.1.7",
    "@vue/eslint-config-prettier": "^10.1.0",
    "@vue/eslint-config-typescript": "^14.1.3",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "jsdom": "^25.0.1",
    "npm-run-all2": "^7.0.1",
    "prettier": "^3.3.3",
    "typescript": "~5.6.3",
    "vite": "^5.4.10",
    "vite-plugin-vue-devtools": "^7.5.4",
    "vitest": "^2.1.4",
    "vue-tsc": "^2.1.10"
  }
}

tsconfig.json 配置

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "experimentalDecorators": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

问题组件代码

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

@Component
class Workflow extends Vue {
  getState() {
    return "";
  }
}

export default toNative(Workflow);
</script>

内容的提问来源于stack exchange,提问作者Avinash Kumar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.16 01:47:36