如何在 CDN VueJS 应用程序中加载信号

Question

I stuck in loading SignalR in my vuejs application, I have included the CDN but wont be able to load the library我一直在我的 vuejs 应用程序中加载 SignalR，我已经包含了 CDN，但无法加载库

output: signalR mounted undefined output：signalR 安装undefined

code:代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-toastify@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/cjs/index.min.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <global-component ></global-component>
    </div>
</body>
<script>
    Vue.use(window['vue-toastify'].default);
    
    Vue.component('global-component', {
        data: function () {
            return {
                message: `I'm from Global`,
                connection: null,
            }
        },
        mounted() {

            console.log('vue-toastify', window['vue-toastify']);
            console.log('Signalr mounted', window['signalR']); // output : Undefined 
            var signalR = window.signalR;
            try {
                this.connection = new signalR.HubConnectionBuilder()
                .withUrl("https://ab.xyz.com/signalhub/", {})
                .withAutomaticReconnect()
                .build();
                console.log('Signalr Connection', connection);
            } catch (error) {
                console.error('SignalR error ', error)
            }
            this.$vToastify.success('Mounted...');
        },
        template: `
        <div> Hey.... {{message}} </br> </div>
        `,
        components: {},
        methods: {}
    });
    const myVueInstance = new Vue({
        el: "#app"
    }) 
</script>

</html>

any help will much be appreciated任何帮助将不胜感激

Answer 1

To use SignalR from CDN in the browser, use the browser build (you're currently using the CommonJS build):要在浏览器中使用 CDN 中的 SignalR，请使用浏览器构建（您当前使用的是 CommonJS 构建）：

https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/browser/signalr.min.js

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="https://cdn.jsdelivr.net/npm/vue-toastify@latest"></script> <script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/browser/signalr.min.js"></script> <div id="app"> <global-component ></global-component> </div> <script> Vue.use(window['vue-toastify'].default); Vue.component('global-component', { data: function () { return { message: `I'm from Global`, connection: null, } }, mounted() { console.log('Signalr mounted', window['signalR']); var signalR = window.signalR; try { this.connection = new signalR.HubConnectionBuilder().withUrl("https://ab.xyz.com/signalhub/", {}).withAutomaticReconnect().build(); console.log('Signalr Connection', this.connection); } catch (error) { console.error('SignalR error ', error) } this.$vToastify.success('Mounted...'); }, template: ` <div> Hey.... {{message}} </br> </div> `, }); const myVueInstance = new Vue({ el: "#app" }) </script>

如何在 CDN VueJS 应用程序中加载信号

问题描述

1 个解决方案

解决方案1
0 2021-02-27 19:39:09

如何在 CDN VueJS 应用程序中加载信号

问题描述

1 个解决方案

解决方案1 0 2021-02-27 19:39:09

解决方案1
0 2021-02-27 19:39:09