visual-studio-code - 在 Visual Studio Code 中使用 p5.js 访问文件

Question

我是一名刚开始使用 p5.js 的新手，刚刚开始使用 Visual Studio Code，但在使用访问文件(无论是图像还是文本)的任何函数时遇到问题。我的目标是加载一个文本文件，以便将其解析为词汇数据。

根据引用文档，我添加了预加载。您可以看到，我也尝试对图像文件执行此操作，结果相同。

function preload(){
fileContents = loadStrings('defaultvocab.txt');
//img = loadImage('AthensDemocracy.jpg');
}

结果就是这组错误信息 并在预加载中挂起。

我不确定这是 VSCode 的设置还是我需要在它创建的 JSON 文件中做的事情，我必须将文件添加到该文件才能使其正常工作，所以它可能需要添加到那里但我找到它的运气并不好。目前launch.json是这样的:

{

// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}",
        "file":"index.html"
    }
]

请原谅悲伤的 90 年代网页设计，感谢您的帮助!

Answer 1

看起来网页仍在通过 native 文件系统路径而不是本地网络服务器 (localhost:8080) 加载。

如果手动打开htts://localhost:8080在您的浏览器中是否运行(网络服务器是否实际运行？)

就我个人而言，我使用 Sam Levigne 的 p5.vscode addon :

1. 安装它
2. 右键单击您的 index.html
3. 点击使用实时服务器打开

我发现实时编码(保存时自动重新加载)非常有用，尤其是在制作原型(prototype)时。