Vue+TypeScript环境下加载SignalR Core失败问题求助

你遇到的这个问题，根源在于Vue CLI的webpack构建环境在浏览器下并没有默认把window映射为global对象，而SignalR的UMD包在非CommonJS/AMD环境下，会尝试将自身挂载到global上，找不到这个变量就会抛出报错。下面给你几个可行的解决方案：

方案1：快速修复——手动定义global变量 #

在项目入口文件（比如main.ts）的最顶部添加一行代码，把window赋值给global：

// main.ts 最顶部
(window as any).global = window;

这个方法最简单直接，不需要修改任何配置，SignalR的UMD包就能找到它需要的global对象了。

方案2：升级并使用ES模块版本的SignalR #

你当前使用的@aspnet/signalr已经是旧版本的包，微软已经将SignalR Core的npm包迁移到@microsoft/signalr下，新版本提供了原生的ES模块支持，完全不需要依赖global对象，是长期的最佳实践。

步骤如下：

1. 卸载旧包：

npm uninstall @aspnet/signalr

2. 安装新版包：

npm install @microsoft/signalr

3. 在组件中导入使用：

import * as signalR from "@microsoft/signalr";

新版包会持续维护，ES模块的兼容性也更好，能从根源避免这类全局对象的问题。

方案3：配置webpack将global指向window #

如果暂时不想升级包，可以通过webpack的ProvidePlugin把global映射到window：
在项目根目录的vue.config.js中添加以下配置：

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        global: 'window'
      })
    ]
  }
}

或者用更符合Vue CLI风格的链式配置方式：

module.exports = {
  chainWebpack: config => {
    config.plugin('provide').use(require('webpack').ProvidePlugin, [{
      global: 'window'
    }])
  }
}

配置完成后重启npm run serve，就能解决报错了。

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