VueJS CDN项目中SignalR加载失败：window.signalR未定义问题求助

你遇到的问题很明确——你加载的是Node.js环境专用的SignalR CommonJS(cjs)版本，浏览器无法识别这个模块格式，所以window.signalR会返回undefined。下面是具体的修复步骤和细节解释：

核心问题分析 #

你引入的SignalR CDN链接是https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/cjs/index.min.js，这个包是为Node.js环境设计的，它使用require语法导出模块，不会在浏览器的window全局对象上挂载signalR变量，自然无法通过window.signalR访问到。

修复步骤 #

1. 替换SignalR的CDN链接为浏览器兼容的UMD版本 #

把原来的SignalR脚本替换为专门为浏览器编译的UMD（通用模块定义）版本，这个格式会自动在window上挂载signalR变量：

<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/browser/signalr.min.js"></script>

2. 修正代码中的小错误 #

你的代码里还有一处细节问题：console.log('Signalr Connection', connection)里的connection没有加this前缀，会导致未定义错误，需要改成this.connection。

修改后的完整代码 #

<!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>
    <!-- 替换为浏览器兼容的UMD版本 -->
    <script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/browser/signalr.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']); // 现在应该能正常输出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); // 修正为this.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>

额外说明 #

• UMD格式的包同时兼容浏览器（挂载到window）和Node.js环境，是CDN加载前端库的标准选择
• 如果你需要升级SignalR版本，只需要修改链接中的版本号即可，比如@6.0.17，注意保持路径为/dist/browser/signalr.min.js

内容的提问来源于stack exchange，提问作者Rajath