使用 lang=ts 和 lang=js 的基于类的组件答案

【问题标题】：Using class based components with lang=ts alongside lang=js使用 lang=ts 和 lang=js 的基于类的组件
【发布时间】：2020-07-09 16:04:22
【问题描述】：

我有一个使用基于类的组件的 vue 项目。我想要一个使用 js 语言而不是 typescript 的组件。

Vue 抱怨我需要一个新的加载器，但我不知道如何添加它。

我正在使用 vue-cli，我没有 webpack.config.js 但我有一个标准的 vue.config.js

使用 vue-cli inspect --plugins，我有以下插件，包括 vue-loader

[
  'vue-loader',
  'define',
  'case-sensitive-paths',
  'friendly-errors',
  'html',
  'pwa',
  'preload',
  'prefetch',
  'copy',
  'fork-ts-checker'
]

然而 vue 在没有 <script lang="ts"> 的组件中抱怨：

Module parse failed: Unexpected character '@' (6:0)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import Component from 'vue-class-component';
| 
> @Component
| export default class TreeNavigation extends Vue {

基本上，我希望 <script lang="ts"> 与常规 <script><script> or <script lang="js"> 的组件一起使用

【问题讨论】：

您是否尝试在js 组件中使用vue-class-component？
@StevenB。是的。那会是个问题吗？检查vue-class-component 的文档，它们仅显示js 示例。如果我从 vue-property-decorator 导入，它仍然会出现相同的错误。
嗯只是一个问题。我不知道答案，但它看起来像 experimentalDecorators 配置的问题。
感谢@StevenB 的想法。我已经检查了 tsconfig 中的实验性装饰器及其启用，与 "allowJs": true 相同。我会更深入地挖掘这个，如果我找到罪魁祸首，我会告诉你。
@StevenB。我需要用 vue add babel 添加 babel 插件（加载器）。感谢您的帮助！

标签： javascript vue.js webpack vuejs2

【解决方案1】：

我需要用 vue add babel 添加 babel 插件（加载器）

【讨论】：