通过插件在 nuxt.js 中导入 Vue 库答案

【问题标题】：Importing a Vue library in nuxt.js via plugins通过插件在 nuxt.js 中导入 Vue 库
【发布时间】：2021-04-30 01:18:36
【问题描述】：

知道我将如何使用这个插件吗？ https://github.com/DimanVorosh/vue-json-rpc-websocket/blob/e2199d89dc15f50e57e7c5c70adfd95e5ceb5cda/src/wsMain.js

我看到它正在自动注册到 vue，但我不能在 nuxt 中使用它。

我创建了plugins/vue-json-rpc-websocket.client.js，在nuxt.config.js注册为

'~/plugins/vue-json-rpc-websocket.client.js'

但我不知道在 inject 方法中写什么，如果我必须这样做才能使其工作。 this.$socket 在组件中未定义。

import Vue from 'vue'
import JRPCWS from 'vue-json-rpc-websocket'

Vue.use(JRPCWS, 'wss://bsc-ws-node.nariox.org:443', {
    reconnectEnabled: true,
    reconnectInterval: 5000,
    reconnectAttempts: 3
})

// do I need this?
export default ({ app }, inject) => {
    // Inject $hello(msg) in Vue, context and store.
    // inject('hello', msg => console.log(`Hello ${msg}!`))
}

另外，知道如何对'wss://bsc-ws-node.nariox.org:443' 字符串进行 ENV 编码吗？

【问题讨论】：

对于 ENV 部分，你看过这个吗？ cli.vuejs.org/guide/mode-and-env.html#environment-variables

标签： vue.js nuxt.js

【解决方案1】：

使用the package that you're using 和您给定的配置完全支持我。到目前为止无需注入任何东西！
这是为该示例创建的新存储库：https://github.com/kissu/so-nuxt-json-rpc-websocket

下面的屏幕截图是在/pages/index.vue 中的mounted 挂钩中使用console.log(this.$socket)，但您也可以使用$vm0 并在选择root 组件后直接从开发工具访问实例（在屏幕截图中也是）。

对于环境变量部分，您可以像这样在目录的根目录中创建一个.env 文件

WS_URL="wss://echo.websocket.org"

// nuxt.config.js
export default {
  publicRuntimeConfig: {
    wsUrl: process.env.WS_URL,
  },
}

然后，像这样在你的插件中使用这个变量

import Vue from 'vue'
import JRPCWS from 'vue-json-rpc-websocket'

export default ({ $config: { wsUrl } }) => {
  Vue.use(JRPCWS, wsUrl, {
    reconnectEnabled: true,
    reconnectInterval: 5000,
    reconnectAttempts: 3
  })
}

【讨论】：