Vue 3 Web 组件 - 如何使用 globalProperties

Question

我不知道如何在 web 组件上使用 globalProperties。

我的 main.js 看起来像这样：

import { defineCustomElement } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import CoolComponent from './CoolComponent.ce.vue'

const apiBaseUrl = 'https://api.my-domain/public';

axios.defaults.baseURL = apiBaseUrl;

const element = defineCustomElement(CoolComponent, {
  plugins: [VueAxios, axios],
});

customElements.define("my-component", element);

我现在想在 main.js 中将变量apiBaseUrl定义为全局变量，这样我就可以从任何组件访问apiBaseUrl 。

在“常规”应用程序中，我会这样解决：

app.config.globalProperties.apiBaseUrl = 'https://api.my-domain/public'

但当然这在这种情况下不起作用。 在这种情况下，“app....”的等价物是什么？

我使用 Vue 3 + Vite。

我怎样才能最好地解决这个问题？ 我期待您的反馈！

问候

Answer 1

在 Vue 3 中不可能

这是 Vue 2 的 Vue.prototype 的替代品，它不再出现在 Vue 3 中。与任何全局的东西一样，应该谨慎使用它。

来源

Answer 2

我能够使用Env-Variables解决问题。 准确地说，我使用了 ElMassimo 的vite-plugin-environment 插件。 感谢tauzN