预览流程简介与常见错误处理

流程简介

由于目前编辑器仅支持浏览器预览，这里仅介绍浏览器预览的流程。

浏览器预览本质上是编辑器开启了一个 express 服务器，在点击预览时打开用户的默认浏览器去访问预览 URL。预览模板里写了一些加载引擎和初始化场景的简单逻辑，而关于用户资源加载主要还是依赖于 setting.js 的生成，因为 setting.js 里面记载了当前项目的资源、脚本以及项目设置信息。预览的 setting.js 是调用构建插件的接口生成的，因而如果 setting.js 没有正常生成可以打开构建调试工具查看。

常见错误处理

在遇到预览无法正常显示时，请先打开开发者工具的 NetWork 查看此时是否有资源或者脚本加载失败。

setting.js 加载失败

在寻找这个问题的原因之前，请先确保在预览前编辑器内没有报错信息。

setting.js 加载失败说明 setting.js 没能正常生成，这时候可以打开 开发者 ——> 构建调试工具 查看是否有报错信息。正常情况下，如果生成失败基本会有对应的报错提示。比较常见的是脚本错误，因为在生成 settings 时会先加载一遍项目脚本，如果项目脚本内存在不合法的书写，那么在加载过程中会抛出异常导致 setting.js 生成失败。具体报错的脚本信息可以参考报错信息内的提示，通常在此处的报错内容，有效信息都是资源的 uuid ，可以复制对应的 uuid 到资源管理器里面搜索定位该脚本。

关于 setting.js 具体的生成流程，可以参考构建流程简介。预览的 setting.js 生成和在只勾选了调试模式的生成规则基本一样，区别在于预览只梳理资源信息，但并不会进行资源的打包生成。

资源加载 404

请使用报 404 的资源 uuid 到编辑器的资源管理器搜索对应资源，解决好该问题即可。