如何避免`vega@3`中‘@’符号展开及解决包请求404错误

我来帮你搞定这个vega@3里@符号被错误解析、导致请求404的问题，结合你提到的Jupyter Notebook场景，给你几个实用的排查和解决思路：

一、先给@做URL编码 #

这是最直接的临时解决方案——把请求路径里的@换成它的URL编码%40。比如：

• 原来的请求：https://cdn.jsdelivr.net/npm/vega@3
• 修改后：https://cdn.jsdelivr.net/npm/vega%403

这样浏览器就不会把@当成锚点或者特殊分隔符，而是完整地把vega%403作为包名传递给CDN，避免路径被错误拆分。

二、检查脚本里的路径处理逻辑 #

如果是你自己写的脚本在处理包路径时“自作主张”拆分了@，可以从这几点排查：

• 看看有没有用split('@')这类函数错误地把包名和版本号分开，导致生成的路径不对。
• 如果用了RequireJS、SystemJS这类模块加载器，它们默认会把@当成版本分隔符，你可以在配置里明确指定路径：
  比如RequireJS的配置可以这么写：

  require.config({
    paths: {
      'vega@3': 'https://cdn.jsdelivr.net/npm/vega@3'
    }
  });
  

  或者直接用编码后的URL作为模块路径，从根源上避免解析问题。

三、Jupyter Notebook里的特殊处理 #

Jupyter的浏览器环境自带一些模块加载机制，可能会干扰你的脚本请求，试试这几个方法：

1. 直接引入完整的Vega脚本
   在Notebook单元格里用%%html魔法命令直接加载CDN脚本，要是还是404就换成编码后的URL：

   %%html
   <script src="https://cdn.jsdelivr.net/npm/vega%403/build/vega.js"></script>
   

2. 明确指定模块名
   有些Jupyter扩展会自动处理脚本的模块请求，你可以给脚本标签加data-requiremodule属性，告诉它不要乱解析：

   <script src="https://cdn.jsdelivr.net/npm/vega@3/build/vega.js" data-requiremodule="vega@3"></script>
   

3. 用官方的Jupyter集成工具
   其实Vega有专门的Jupyter扩展，已经帮你处理了版本加载的问题，安装后用起来更省心：
   先在终端安装：

   pip install vega
   

   然后在Notebook里直接用：

   from vega import Vega
   Vega(你的可视化配置)
   

四、揪出请求被展开的根源 #

如果上面的方法都没用，建议打开浏览器开发者工具（按F12），切换到Network标签：

• 看实际发送的请求URL到底是什么，确认@被改成了什么（比如是不是变成了锚点#3，导致路径变成vega）。
• 检查响应头，看看CDN服务器是不是做了重定向，把你的请求路径改坏了。

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