如何无需本地Web服务器运行Phaser游戏并移植到Tauri？

核心问题根源 #

Phaser默认依赖HTTP请求加载资源，直接用file://协议打开本地HTML文件时，浏览器的同源策略会限制资源访问，导致游戏无法正常加载素材。

可行解决方案 #

1. 适配相对路径加载资源 #

针对Phaser 3及以上版本，确保所有资源路径使用相对路径，且资源文件与HTML文件的层级关系对应：

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create
  }
};

function preload() {
  // 用相对路径指定资源位置，比如资源放在同级assets目录下
  this.load.image('player', './assets/player.png');
  this.load.audio('bgMusic', './assets/bgm.mp3');
}

注意：部分浏览器对file://协议下的音频、视频加载仍有严格限制，此方法对图片类资源适配性更好。

2. 修改浏览器安全设置（仅用于本地开发） #

• Chrome/Edge：右键浏览器快捷方式 → 属性 → 目标栏，在原有路径后添加启动参数（注意留空格）：

  --allow-file-access-from-files --disable-web-security
  

  重启浏览器后直接打开本地HTML文件即可。
• Firefox：在地址栏输入about:config，搜索security.fileuri.strict_origin_policy，将其值改为false，重启浏览器生效。

3. 资源内嵌为Base64编码 #

将图片、音频等资源转换为Base64编码，直接内嵌到代码中，完全脱离外部文件：

function preload() {
  // 内嵌Base64格式的图片资源
  this.load.image('logo', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqQzkWSwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAUSURBVBgZBcHPcsAABAAAQ+zWF8wAAAAASUVORK5CYII=');
}

此方法无需依赖任何外部资源，但会增大文件体积，适合小型游戏。

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