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'导入{Component，Prop，Vue}; | @零件 |导出默认类HelloWorld扩展Vue { | 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插件方面/ --experimentalDecorators标记您遇到问题的地方。

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

自主流以来，它不支持第二阶段的装饰器   编译器仍然可以转换为旧的装饰器。

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

组件装饰器

2 个答案: