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
相关产品推荐
相关产品推荐

