无需Vite或其他打包工具，如何正确引入Pixi.js并解决源映射404错误？

算力阿峰

2026-6-1

解决Pixi.js源映射404错误的几种方案

以下是不用Vite就能解决问题的方法，按需选择：

下载对应源映射文件到本地
pixi.min.js文件末尾有一行注释会告诉浏览器去请求对应的.map文件，你需要去Pixi.js官方发布页面（对应你使用的版本）下载pixi.min.js.map，把它和pixi.min.js放在同一个目录下，这样Node服务器就能正确返回这个文件，不会出现404。
移除pixi.min.js里的源映射注释
打开本地的pixi.min.js，找到最后一行类似//# sourceMappingURL=pixi.min.js.map的代码，直接删掉这一行，或者把它改成注释（比如// # sourceMappingURL=pixi.min.js.map）。这样浏览器就不会主动去请求源映射文件，自然不会报错。
改用CDN引入Pixi.js
把HTML里的本地引入改成CDN链接，比如：
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
```
CDN服务商已经配置好了源映射文件的路径，浏览器能自动从CDN获取对应的.map文件，不会出现找不到的问题。
检查Node服务器的静态资源配置
如果你用的是Express这类框架，确保服务器正确托管了包含Pixi.js文件的目录。比如用Express的话，要加上：
```
const express = require('express');
const app = express();
// 假设你的静态文件都放在public文件夹下
app.use(express.static('public'));
```
把pixi.min.js和对应的.map文件都放到public目录里，这样服务器就能正确返回这些资源。