VS Code运行p5.js项目时sketch.js未执行问题求解

• p5 Server、p5.vscode这类扩展启动本地静态服务时，默认将当前打开文件的所在文件夹作为服务根目录。如果你直接打开01_P/P_1_0_01/路径下的文件启动服务，服务根目录就是P_1_0_01文件夹，此时代码中../../libraries/这类向上两级跳转的资源路径，已经超出静态服务允许访问的根目录范围，浏览器同源安全策略会拦截这类跨目录的资源请求，最终导致p5核心库、generative-design依赖库、sketch.js全部加载失败，页面只渲染出body标签里写死的问号元素，无法生成p5画布。
• 你可以直接打开浏览器开发者工具的Console面板验证，会看到大量p5相关资源的404加载报错。

• 打开工作区时，直接选中项目最外层的Code-Package-p5.js-1.3.2文件夹在VS Code中打开，不要只打开单个示例的子文件夹。
• 优先选择兼容性更好的通用静态服务扩展运行项目，启动前先进入扩展设置，将服务根目录（Root）配置为当前工作区根目录，也就是/。
• 如果继续使用p5 Server、p5.vscode扩展，找到扩展的配置项，手动将服务根目录指定为Code-Package-p5.js-1.3.2文件夹，不要使用默认的「当前文件所在目录」规则。
• 配置完成后启动服务，访问对应示例的地址格式应为http://localhost:端口号/01_P/P_1_0_01/index.html，此时所有相对路径都能在服务根目录下匹配到对应文件，资源加载完成后p5画布就会正常渲染。
• 临时测试单个示例的话，也可以把示例index.html里的依赖路径改为指向同目录下的资源，不过这种方式需要手动调整每个示例的路径，不适合批量运行项目内的所有案例。

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