在Vue3上配置推动器

Question

我有一个项目在Vue3，并希望实现一个实时API或网络套接字。因此，我尝试用Vue第三部分库使用pusher，即pusher-vue和vue-pusher。使用pusher-vue，我得到了错误：Uncaught : e.prototype是未定义的。使用vue-pusher，我得到了错误：Uncaught : Vue.prototype是未定义的。以下是库的配置：

PUSHER VUE

Component.vue

​

export default{
  channels: {
       applications_channel: {
           subscribeOnMount: true,
           subscribed(){
               console.log("Some text")
           },

           bind:{
               add_application_event(data){
                   console.log(data)
               }
           }
       }
  }
}

​

main.js

​

createApp(App)
.use(PusherVue, {
    app_key: "MY_KEY",
    cluster: 'MY_CLUSTER',
    debug: true,
    debugLevel: "all"
})
.mount("#app")

​

VUE PUSHER

Component.vue

​

export default{
  read(){
      var channel = this.$pusher.subscribe('applications-channel')

            channel.bind('add-application-event', ({ log }) => {
                console.log(log);
            })
       }
}

​

main.js

​

createApp(App)
.use(require("vue-pusher"), {
    api_key: "MY_KEY",
    options: {
        cluster: 'MY_CLUSTER',
        ecrypted: true,
    }
})
.mount("#app")

​

请您帮助我如何在Vue3上配置此功能，或推荐任何初学者友好的替代方案，以便在Vue3上实现相同的功能。

Answer 1

pusher-vue和vue-pusher都是为Vue 2构建的，因此您需要使用Vue 3 迁移构建使库在您的项目中工作。

要设置Vue CLI支架项目，请执行以下操作：

1. 安装与您的Vue构建版本相匹配的Vue兼容性生成和证监会编译器(即，如果@vue/compat@^3.1.0和@vue/compiler-sfc@^3.1.0在package.json中有vue@^3.1.0，则安装package.json)： npm i -S @vue/compat@^3.1.0
2. 将Webpack配置为别名vue到@vue/compat构建，并将vue-loader的兼容性模式设置为Vue 2： // vue.config.js module.exports ={ chainWebpack: config => { config.resolve.alias.set('vue'，'@vue/compat') config.module .rule('vue') .use(‘vue-module.exports’).tap(选项=> {返回{ ...options，compilerOptions：{ compatConfig：{compatConfig:2}

在Vue 3w/迁移构建

但是，在Vue实例上，vue-pusher 1.1.0似乎以只公开Pusher的一个新实例 (来自pusher-js)为this.$pusher。该代码可以很容易地作为插件迁移到Vue 3：

// plugins/pusher.js
export default (app, { apiKey, ...options }) => {
  const Pusher = require('pusher-js')
  app.config.globalProperties.$pusher = new Pusher(apiKey, options)
}

// main.js
const { createApp } = require('vue')
import App from './App.vue'
import PusherPlugin from './plugins/pusher'

createApp(App)
  .use(PusherPlugin, { apiKey: 'YOUR_API_KEY', cluster: 'YOUR_CLUSTER' })
  .mount('#app')

在Vue 3中