Nuxt Vue Typescript 全局插件在脚本语言 ts 中不可用

Question

我目前正在将一个 nuxt vue js（v2 不是 v3）项目转换为 typescript，我无法弄清楚为什么插件在 all.ts 文件中工作时无法在.vue 文件中被识别。

正如您在代码片段中看到的，我还尝试使用 bootstrap vue 和 i18n，它们在 .vue 脚本标签中也无法识别，只能在 ts 文件中使用。 唯一的解决方法是创建一个 function 在 mixin.ts 文件中使用它们并以这种方式扩展它们。 或者手动将所有插件导入每个脚本。 这种破坏了全局插件的观点，所以我缺少什么，或者为什么默认情况下它们不被识别？

我也尝试直接在 main.vue 组件中扩展 Vue 而不是 mixin，但同样的问题仍然存在。

组件.vue

<template>
  ...
  <div>
    {{$testFunction('test')}} this also works, but does not give any type indication or warnings 
  </div> 
</template

<script lang = "ts">
import Component, { mixins } from 'vue-class-component';
import { TableMixin } from '../../mixins/tablemixin';

@Component
class Contacts extends mixins(TableMixin) {
  test() {
    // Property '$testFunction' does not exist on type 'Contacts'.Vetur(2339)
    console.log(this.$testFunction('test'));
  }
  testMixin() {
    // Works fine through mixin...
    console.log(this.testMixinFunction('test'));
  }
}
export default Contacts;
</script>

mixins/tablemixin.ts

import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export class TableMixin extends Vue { 
  testMixinFunction(str: string) {
    return this.$testFunction(str);
  }
}

插件/helpers.ts

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $testFunction(str: string): string;
  }
}

Vue.prototype.$testFunction = (str: string): string => {
    return str + 'tested';
}

nuxt.config.js

plugins: [ 
  '~/plugins/helpers'
]

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "nuxt-i18n",
      "bootstrap-vue"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Answer 1

看起来只是 vetur 在抱怨。 TS 编译器对全局插件没问题。 该项目缺少 vetur.config.js，因此它在错误的目录中查找 ts 类型（项目有客户端和 api）。 只需添加它并指向正确的位置就可以解决我的问题。

在这里找到的解决方案： Vetur 文档