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 文檔