具有 vue-class-components 和 typescript 的 vuejs 實例屬性時出錯

Question

我想為我的服務器的 url 有一個全局變量。

我在我的 main.ts 上寫了這個

Vue.prototype.$apiUrl = "http://localhost:3000";

然后嘗試在 App.vue 中使用它

console.log(this.$apiUrl)

我可以在瀏覽器的控制台中看到 url。

但我收到此錯誤： Property '$apiUrl' does not exist on type 'App'.Vetur(2339)

我無法繼續，因為在應用程序的某些部分 this.$apiUrl 由於某種原因未定義。

我該如何解決？

Answer 1

請注意Class API 提案已被放棄。 要在 Vue 3 發布之前使用 Vue + Typescript，最好使用Vue.extend({})組件樣式：

<script lang="ts">
  import Vue from 'vue';

  export default Vue.extend({
    ...
  })
</script>

---

要向 Vue 實例添加全局類型，請閱讀Typescript 支持。

具體來說，您應該將其添加到您的墊片中：

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $apiUrl: string;
  }
}

Answer 2

解決了！ 我需要將 $apiUrl 添加到 Vue 的類型中

我在 @types 文件夾中創建了 adts 文件並添加了以下內容

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $apiUrl: string
  }
}