M1芯片MacBook Air运行Sveltejs模板出现白屏问题如何解决

• 优先排查端口占用问题：MacBook M1系列默认会占用5000端口用于AirPlay Receiver服务，即使终端显示dev服务启动在5000端口，实际访问的是系统的空白服务，直接修改项目启动端口即可解决绝大多数该类问题
• 修改端口操作方法：
  • 临时指定端口启动：终止当前运行的dev进程后，执行 npm run dev -- --port 3000，访问http://localhost:3000即可
  • 固定项目启动端口：打开项目根目录的package.json文件，找到scripts下的dev配置项，添加端口参数：
    • 基于Vite的新版Svelte模板：修改为 "dev": "vite --port 3000"
    • 基于Rollup的旧版模板：修改为 "dev": "rollup -c -w --port 3000"
• 其他排查路径：
  • 确认Node.js版本为16及以上的LTS版本，M1芯片对低版本Node兼容性较差，可通过 node -v 查看当前Node版本
  • 若修改端口后仍空白，打开浏览器开发者工具的Console面板查看报错信息，多数为依赖安装异常，可删除node_modules文件夹和package-lock.json文件后重新执行 npm install 再启动
• 验证：启动成功后终端会输出实际可访问的地址，直接点击终端输出的地址跳转访问即可，不要手动输入5000端口地址

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