typescript - 具有 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 Support。

具体来说，您应该将其添加到您的垫片中：

import Vue from 'vue'

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

Answer 2

解决了！我需要将 $apiUrl 添加到 Vue 的类型中

我在 @types 文件夹中创建了一个 .d.ts 文件并添加以下内容

import Vue from 'vue'

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