使用TypeScript将全局属性添加到Vue 3

我想向Vue 3应用程序添加一个全局属性，如建议的那样

原型方法不适用于TypeScript

我找到了一个示例，将其转换为config.d.ts代码

从“Vue”导入Vue
从“@/config/config.json”导入base
从“@/config/config.dev.json”导入dev
从“@/config/config.prod.json”导入产品
让配置
if（process.env.NODE_env===‘生产’）{
config=Object.freeze（Object.assign（base，prod））
}否则{
config=Object.freeze（Object.assign（base，dev））
}
声明模块“vue/types/vue”{
接口Vue{
$config:config
}
}

我想加载一些具有dev或prod作用域的本地配置文件。作用域文件将不会签入GIT存储库

main.ts现在看起来像这样

从“Vue”导入Vue
从“vue”导入{createApp}
从“./App.vue”导入应用程序
从“@/plugins/Config.d.ts”导入配置
Vue.use（配置）
createApp（App）.mount（“#App”）

问题是：

ERROR in src/main.ts:6:5
TS2339: Property 'use' does not exist on type 'typeof import("d:/Martin/Entwicklung/2020/STA-Electron/node_modules/vue/dist/vue")'.
    4 | import Config from '@/plugins/config.d.ts'
    5 |
  > 6 | Vue.use(Config)
      |     ^^^
    7 | createApp(App).mount('#app')
    8 |

理想情况下，我想要实现的是一个全局

config

或

$config

属性，可以在Vue 3的设置方法中使用

导出默认定义组件({
名称：“应用程序”，
组件：{}，
设置（道具、上下文）{
常量elem=ref（上下文$config.prop1）
常数doSth=（）=>{
console.log（'Config'，context.$Config）
}
返回{doSth，elem}
},
})

我怎样才能解决这个问题

更新 在danielv的回答之后，新插件看起来是这样的

从“vue”导入{App}
导出接口配置选项{
基地：有吗
戴夫：有吗
普罗德：有吗
}
导出默认值{
安装：（应用程序：应用程序，选项：配置选项）=>{
app.config.globalProperties.$config=
process.env.NODE_env===“生产”
？Object.freeze（Object.assign（{}，options.base，options.prod））
：Object.freeze（Object.assign（{}，options.base，options.dev））
},
}

main.ts也变成了这个

从“vue”导入{createApp}
从“@/App.vue”导入应用程序
从“@/plugins/config”导入ConfigPlugin
从“@/config/config.json”导入base
从“@/config/config.dev.json”导入dev
从“@/config/config.prod.json”导入产品
createApp（App）.use（ConfigPlugin，{base，dev，prod}）.mount（'#App'）

这个简单的插件可以在模板中使用

{{$config.prop1}}

IntelliJ抱怨未知变量prop1，但它可以工作

---

我搜索了很多，但没有找到将$config插入组合api使用的安装方法的方法。

在Vue 3中，您在应用程序实例上调用

use

方法，它不是Vue变量上的方法

const app = createApp(App)
app.mount('#app')
app.use(config)

此外，您还需要编写插件以符合VUE3的要求（使用

install

method的对象）

查看编写和使用插件，它描述了一个与您非常相似的用例

---

顺便说一句，

*.d.ts

文件旨在用作声明类型的纯声明文件，通常是对其他非类型化模块的补充（例如键入现有js代码）。在编写Typescript代码时，您通常不需要自己编写

*.d.ts

文件（声明可以由tsc编译器自动生成）。

您可以在应用程序中扩展

@vue/runtime core

Typescript模块：

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $config: Record<string, unknown>;
  }
}

声明模块'@vue/runtime-core'{
接口组件自定义属性{
$config:Record；
}
}

类似于在Vue 2中的操作

---

这似乎还没有成为Vue 3文档，但它是随而引入的。查看以了解更多信息。

谢谢您的提示。你能再详细一点吗？我更新了问题。“我搜索了很多，但没有找到将$config插入到组合api使用的安装方法中的方法。”-我错过了对话的这一部分，这最终有点破坏了交易，因为我现在有了一个全局变量，除了在安装逻辑中，我可以在任何地方使用它，“提供注入”方法可能会更好。在扩展链接文档中定义的模块之前，不要忘记添加

从“Vue”导入Vue

。Soooo。。。这对我来说从来都不起作用，Vue 2或3。至少维图尔不喜欢。我正在培养一种本地依赖性。有人能在与我相同的上下文中使用它吗？编译器有点不喜欢“Module”../../../node_modules/vue/dist/vue”没有导出的成员“defineComponent”。``为了增强从“vue”导入时首先需要的

全局属性
导入{ComponentCustomProperties}否则编译器将对此进行投诉