Я хочу добавить глобальное свойство в приложение Vue 3, например, предложенное здесь
Подход прототипа не работает с TypeScript.
Я нашел пример, который преобразовал в этот код как config.d.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
}
}
Я хочу загрузить некоторые локальные файлы конфигурации с помощью области разработки или прод. Файлы с заданной областью не будут зарегистрированы в репозитории GIT.
Main.ts теперь выглядит так ...
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
или $config
, которое можно использовать в методе настройки Vue 3.
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}
},
})
Как я могу это исправить?
Обновлять
После ответа от danielv новый плагин выглядит так
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))
},
}
Main.ts также превратился в этот
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')
Этот простой плагин можно использовать в шаблоне
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<p>{{ $config.prop1 }}</p>
</template>
IntelliJ жалуется на неизвестную переменную prop1, но это работает.
Я много искал, но не нашел способа вставить мою $ config в метод настройки, который используется с api композиции.