组件装饰器的 vue-loader 解析错误

Posted 2023-02-22

【中文标题】组件装饰器的 vue-loader 解析错误

【英文标题】：vue-loader parse error for component decorator

【发布时间】：2018-11-27 10:25:38

【问题描述】：

我在使用 vue、typescript、webpack 和组件装饰器时遇到问题。

这是错误

./app/modules/popin-ratings-reviews/templates/HelloWorld.vue?vue&type=script&lang=ts (./node_modules/vue-loader/lib??vue-loader-options!./app/ 中的错误模块/popin-ratings-reviews/templates/HelloWorld.vue?vue&type=script&lang=ts) 10:0 模块解析失败：意外字符“@”（10:0） 您可能需要适当的加载程序来处理此文件类型。 |从'vue-property-decorator'导入组件，道具，Vue； | @零件 |导出默认类 HelloWorld 扩展 Vue |消息='你好世界'; @ ./app/modules/popin-ratings-reviews/templates/HelloWorld.vue?vue&type=script&lang=ts 1:0-130 1:146-149 1:151-278 1:151-278 @ ./app/modules/popin-ratings-reviews/templates/HelloWorld.vue @ ./app/modules/popin-ratings-reviews/index.m.ts

webpack vue-loader 似乎无法解析组件装饰器语法。 我该如何解决？

【问题讨论】：

我刚刚遇到了同样的问题。您已经找到解决方案了吗？

是的，我把它放在下面的评论中

【参考方案1】：

我找到了解决办法

这是我使用的 webpack 规则的配置，它正在工作

rules: [
  
    test: /\.tsx?$/,
    exclude: [
      /node_modules/
    ],
    use: 
      loader: "ts-loader",
      options: 
        appendTsSuffixTo: [/\.vue$/]
      
    
  ,
  
    test: /\.vue$/,
    use: 
      loader: "vue-loader"
    
  
  ...

【参考方案2】：

我认为更多的是在 babel 插件方面/--experimentalDecorators 标记您遇到问题的地方。

必需：ECMAScript 阶段 1 装饰器。如果你使用 Babel， 需要 babel-plugin-transform-decorators-legacy。如果你使用 TypeScript，启用 --experimentalDecorators 标志。

它不支持 stage 2 装饰器，因为它是主流 转译器仍然转译为旧的装饰器。

这似乎是您正在寻找的。 https://github.com/vuejs/vue-class-component