face-api.js人脸检测应用脱离live server运行出现白屏如何解决

根因定位 #

• 该项目采用*ES6模块（ESM）*语法开发，直接通过file://协议打开本地HTML文件时，浏览器同源策略会拦截模块加载请求，导致页面渲染空白
• 自行搭建的localhost服务通常默认未配置适配ESM加载的响应规则与MIME类型，也会触发.js模块加载失败问题，而Live Server默认内置了符合前端模块运行要求的服务配置，因此可正常启动项目

可用运行方案 #

方案1：Python内置服务启动（无额外依赖） #

本地安装有Python环境的情况下，直接进入项目根目录（index.html所在文件夹）打开终端，执行对应命令：

• Python 3 版本运行：python -m http.server 8080
• Python 2 版本运行：python -m SimpleHTTPServer 8080
  命令执行完成后，在浏览器访问 http://localhost:8080 即可正常打开应用

方案2：Node.js生态快速启动 #

本地存在Node.js环境时，可直接使用serve工具快速启动合规的静态服务，项目根目录下执行：
npx serve -l 8080
启动后按照终端提示访问对应本地地址即可正常运行

方案3：适配直接打开HTML的场景 #

如果需要实现双击HTML文件即可打开运行，可对项目做如下修改：

1. 移除HTML文件中所有script标签上的type="module"属性
2. 把代码中所有import引入语法替换为对应依赖的UMD格式包引入，或把依赖代码直接合并到主执行脚本中，规避模块加载的跨域限制

异常排查 #

启动服务后若仍出现空白，按F12打开浏览器控制台，优先排查是否存在以下报错：

• CORS跨域错误
• 模块加载失败
• MIME类型不匹配
  根据报错调整对应服务配置即可解决

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