0
点赞
收藏
分享

微信扫一扫

使用vue-class-component @Component时,Module parse failed: Unexpexted charactor ‘@‘

言诗把酒 2022-02-10 阅读 86

问题描述

vue2+ts项目中,使用vue-class-component装饰器之后,webpack编译报错:‘Module parse failed: Unexpexted charactor ‘@’

// App.vue
<template>
  <div>
    {{ username }}
  </div>
  
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class Abc extends Vue {
  username= 'hello'
}
</script>

编译结果:
在这里插入图片描述

问题分析

问题是在于编译vue文件的时候,无法解析‘@’字符,webpack不识别该字符。对于装饰器的解析,需要安装babel-loader 或者 ts-loader。

解决方案

方案一: 如果您使用的是ts语言(安装过ts-loader),则在App.vue中给标签script添加 lang=“ts” 属性

...
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class Abc extends Vue {
  username: string = 'hello'
}
</script>

相关安装请参考
ts安装 en
vue-class-cpmponent手动安装 en

方案二: 如果您使用的是JS,安装配置babel相关的依赖就可。
相关安装请参考:
babe安装 en
vue-class-cpmponent手动安装 en

举报

相关推荐

0 条评论