[英]Configuring Pusher on Vue3
我在 Vue3 中有一個項目,想實現一個實時 API 或 web 套接字。 所以我嘗試使用 Vue 第三方庫pusher-vue 和 vue-pusher 來使用 pusher 。 使用pusher-vue我收到錯誤: Uncaught TypeError: e.prototype is undefined 。 使用vue-pusher我收到錯誤: Uncaught TypeError: Vue.prototype is undefined 。 以下是庫的配置:
推動者
組件.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
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 上實現相同的功能。
pusher-vue
和vue-pusher
都是為 Vue 2 構建的,因此您需要使用 Vue 3 遷移構建來使該庫在您的項目中工作。
要設置您的 Vue CLI 腳手架項目:
安裝與您的 Vue 構建版本匹配的 Vue 兼容性構建和 SFC 編譯器(即,如果vue@^3.1.0
package.json
則安裝@vue/compat@^3.1.0
和@vue/compiler-sfc@^3.1.0
package.json
):
npm i -S @vue/compat@^3.1.0 npm i -S @vue/compiler-sfc@^3.1.0
將 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-loader').tap(options => { return {...options, compilerOptions: { compatConfig: { MODE: 2 } } } }) } }
然而, vue-pusher
1.1.0 似乎只在 Vue 實例上公開了一個新的 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')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.