Question

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

原型方法不适用于TypeScript。

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

Character

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

main.ts现在看起来像这样...

import Vue from 'vue'

import base from '@/config/config.json'
import dev from '@/config/config.dev.json'
import prod from '@/config/config.prod.json'

let config
if (process.env.NODE_ENV === 'production') {
  config = Object.freeze(Object.assign(base, prod))
} else {
  config = Object.freeze(Object.assign(base, dev))
}

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

问题：

import Vue from 'vue'
import {createApp} from 'vue'
import App from './App.vue'
import Config from '@/plugins/config.d.ts'

Vue.use(Config)
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属性，可以在Vue 3的设置方法中使用它

$config

我该如何解决？

更新

在danielv回答之后，新插件看起来就这样

export default defineComponent({
  name: 'App',
  components: {},
  setup(props, context) {
    const elem = ref(context.$config.prop1)
    const doSth = () => {
      console.log('Config', context.$config)
    }
    return {doSth, elem}
  },
})

main.ts也更改为此

import {App} from 'vue'

export interface ConfigOptions {
  base: any
  dev: any
  prod: any
}

export default {
  install: (app: App, options: ConfigOptions) => {
    app.config.globalProperties.$config =
      process.env.NODE_ENV === 'production'
        ? Object.freeze(Object.assign({}, options.base, options.prod))
        : Object.freeze(Object.assign({}, options.base, options.dev))
  },
}

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

import {createApp} from 'vue'
import App from '@/App.vue'
import ConfigPlugin from '@/plugins/config'
import base from '@/config/config.json'
import dev from '@/config/config.dev.json'
import prod from '@/config/config.prod.json'

createApp(App).use(ConfigPlugin, {base, dev, prod}).mount('#app')

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

我进行了很多搜索，但没有找到将$ config插入与合成api一起使用的setup方法中的方法。

Answer 1

您可以在应用程序中扩充@vue/runtime-core TypeScript模块：

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

类似于Vue 2中的used to work。

似乎这还没有纳入Vue 3文档中，而是由vuejs/vue-next#982引入的。检出ComponentCustomProperties interface source code以获得更多信息。

Answer 2

在Vue 3中，您在应用程序实例上调用use方法，而不是Vue变量上的方法。

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

此外，您需要编写插件以符合Vue 3的期望（具有install方法的对象）。

查看Vue 3 guide的编写和使用插件，它描述了与您非常相似的用例。

顺便说一下，*.d.ts文件旨在用作声明类型的纯声明文件，通常是对其他未类型化模块（例如，键入现有js代码）的补充。编写Typescript代码时，通常不需要自己编写*.d.ts文件（声明可以由tsc编译器自动生成）。

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

更新

2 个答案: