相关疑难解决方法(0)

我有一个javascript变量,我想在实例化时全局传递给Vue组件,因此每个注册的组件都将它作为属性或者可以全局访问.

注意::我需要将vuejs的这个全局变量设置为READ ONLY属性

我正在使用 Vue CLI 开发应用程序。此应用程序是一个 Web 界面，必须与板上的 Rest API 进行通信。

所以，因为董事会会移动，董事会的 IP 会随着时间的推移而改变，这取决于我在哪里。

这是我的项目当前树：

IP 配置包含在 Settings.js 文件中：

export const Settings = {
    // Server configuration
    SERVER_IP: '127.0.0.1',
    SERVER_PORT: '9000',

    SERVER_PROTOCOL: 'http', // http or https

    // Website configuration
    DEBUG_MODE: true
};

在我的文件中，我使用以下语句导入此 IP：

import {Settings} from '../../Settings'
const ip = Settings.SERVER_IP;

// Do stuff

这工作正常。但问题是：当 IP 改变时，我必须重新编译所有内容。因为 Settings.js 是和其他 JS 文件一起编译的。

所以，我想知道是否有办法让配置文件保留在 dist/ 目录中，并在执行期间由我的 JS 应用程序读取。因此，每次我的应用程序服务器 IP 更改时，我都不必重新编译所有内容。

泰为您提供帮助:)

在 vuejs 2 中，可以将组件分配给主应用程序实例上的全局变量，如下所示......

const app = new Vue({});

Vue.use({
  install(Vue) {
    Vue.prototype.$counter = new Vue({
      data: () => ({ value: 1 }),
      methods: {
        increment() { this.value++ },
      }
    });
  }
})

app.$mount('#app');

但是当我将其转换为 vue3 时，我无法访问任何属性或方法......

const app = Vue.createApp({});

app.use({
  install(app) {
    app.config.globalProperties.$counter = Vue.createApp({
      data: () => ({ value: 1 }),
      methods: {
        increment() { this.value++ }
      }
    });
  }
})

app.mount('#app');

这是 vue2 的示例... https://jsfiddle.net/Lg49anzh/

这是 vue3 版本... https://jsfiddle.net/Lathvj29/

所以我想知道在 vue3 中这是否仍然可能以及如何实现，或者我是否需要重构我的所有插件？

我试图让示例尽可能简单来说明问题，但如果您需要更多信息，请告诉我。