如何在Nuxt插件中使用publicRuntimeConfig

Question

我创建了一个Vue Socket.io插件，路径为@/plugins/socket-io.js。

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'

Vue.use(
  new VueSocketIO({
    debug: true,
    connection: process.env.SOCKET_IO_CONNECTION,
  })
)

如何修改以使用publicRuntimeConfig

我的nuxt.config.js文件

publicRuntimeConfig: {
    peerServerHost: process.env.PEER_SERVER_HOST,
    peerServerPort: process.env.PEER_SERVER_PORT,
    peerServerPath: process.env.PEER_SERVER_PATH,
  },
  privateRuntimeConfig: {
    signalServerKey: process.env.SIGNAL_SERVER_KEY,
    signalServerCert: process.env.SIGNAL_SERVER_CERT,
    socketIOConnection: process.env.SOCKET_IO_CONNECTION,
  },

- Putra Fajar Hasanuddin

Answer 1

我找到了解决方法,

把 socketIOConnection 移动到 publicRuntimeConfig 中

然后在 @/plugins/socket-io.js 文件中操作。

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'

export default function ({ $config }) {
  Vue.use(
    new VueSocketIO({
      debug: true,
      connection: $config.socketIOConnection,
    })
  )
}

- Putra Fajar Hasanuddin

---

请注意，这个变量将在客户端上可用，这意味着加载您的应用程序的任何人都可以查看它。如果这不是一个“机密”，那很好。如果是机密，请不要这样做。 - Nick Coad