在 M1 MacBook Air 上运行 Sveltejs 模板时出现黑屏答案

【问题标题】：Blank screen when running Sveltejs template on M1 MacBook Air在 M1 MacBook Air 上运行 Sveltejs 模板时出现黑屏
【发布时间】：2021-10-25 12:08:30
【问题描述】：

我正在学习 Sveltejs，直到现在我一直在使用 https://svelte.dev/repl/ 完成教程，该教程运行良好。

但是，我想在我的机器 (MacBook Air M1) 上开发和运行 Sveltejs 应用程序 - 所以我下载了提供的 sveltejs 文件并在 VS Code 中打开它。

我安装了 node_modules npm install。然后，我运行npm run dev 似乎没有产生错误

Screenshot of the terminal

尽管如此，当我打开 http://localhost:5000 时，我会看到一个空白页面，然后继续“检查元素”会显示一个空白网页：Screenshot of localhost:5000

我从https://svelte.dev/repl/ 下载了这个模板 - 我没有对这个项目进行任何更改，但它仍然出现故障。

任何帮助表示赞赏并提前感谢您！

需要注意的是，我是 web 开发和节点包管理器的新手。

【问题讨论】：

您的 App.svelte 文件中有代码吗？
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript npm terminal svelte

【解决方案1】：

M1 mac 上的问题（实际上可能是由于 osX Catalina 而不是 M1，但我没有检查过运行 Catalina 的英特尔）是命令中心正在使用端口 5000。这意味着 svelte 无法绑定到该端口。

要查看 Mac 上哪些端口处于活动状态，请运行命令

lsof -nP +c 15 | grep LISTEN

当您运行 npm run dev 时，您可以将端口设置为不冲突的其他端口...这就是我运行的。

PORT=54321 npm run dev

这应该可以解决它并为您运行。

然后您将访问它

http://localhost:54321

【讨论】：

另外，如果你想在你的 package.json 文件中配置端口，这样你就不必在每次使用 --environment 标志时都在命令行中输入指定端口。 "dev": "rollup -c -w --environment PORT:54321"
非常感谢，它成功了！

【解决方案2】：

当你开始你的苗条项目时，你需要这个命令：

npx degit sveltejs/template my-svelte-project

在你进入你的项目之后：

cd my-svelte-project

当你在这个项目中时，你会运行：

npm install
npm run dev

在 npm run dev 正常运行后，您将获得有关女巫端口应用程序运行的信息。

然后您转到 src 和 App.svelte 并默认将代码替换为您的代码。通常它必须工作。

在你放代码之前，你有没有一个 svelte 的欢迎页面？

here你有一个很好的svelte教程。

【讨论】：

我也用 MacBook Air。
这些说明似乎不起作用 - 我仍然看到一个空白页面（在 Safari 上），但是我已经在 Google Chrome 上尝试过了，我看到一条消息说“访问本地主机被拒绝” '，错误代码是403。有什么帮助吗？
查看您的代理、安全或防火墙，然后将其停用。
感谢您的建议，但 Gildo T Baggins 的回答解决了我的错误。