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

Question

我在使用 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/modules/popin 中的错误-ratings-reviews/templates/HelloWorld.vue?vue&type=script&lang=ts) 10:0 模块解析失败：意外字符 '@' (10:0) 您可能需要适当的加载程序来处理此文件类型。| 从'vue-property-decorator'导入{组件，道具，Vue}；| @组件 | 导出默认类 HelloWorld 扩展 Vue { | message = '你好世界'; @ ./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"
    }
  }
  ...