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

Question

我有一个问题，使用vue，打字稿，webpack和组件装饰师。

这是错误

./app/modules/popin-ratings-reviews/templates/HelloWorld.vue?vue&type=script&lang=ts (./node_modules/vue-loader/lib??vue-loader-options!./app/modules/popin-ratings-reviews/templates/HelloWorld.vue?vue&type=script&lang=ts) 10:0模块解析错误失败:意外字符“@”(10:0)您可能需要一个适当的加载程序来处理此文件类型。从‘Vue -property-decorator’导入{ Component，Prop，Vue }；\x @Component导出默认类HelloWorld扩展Vue{AC.26 message = 'hello world'；@ ./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似乎不能解析组件修饰器语法。我怎么才能解决呢？

Answer 1

我找到了解决办法

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

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

Answer 2

我认为更多的是在babel插件方面/

所需: ECMAScript第一阶段装饰师。如果您使用Babel，则需要使用babel插件-转换-装饰器-遗产。如果你使用TypeScript，启用 它不支持第2阶段装饰者，因为主流的预告片仍然转到老装饰者。

这似乎就是你要找的。https://github.com/vuejs/vue-class-component