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

Blank screen when running Sveltejs template on M1 MacBook Air

我正在学习 Sveltejs,直到现在我一直在使用 https://svelte.dev/repl/ 完成教程,效果很好。

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

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

Screenshot of the terminal

然而,当我打开 http://localhost:5000 时,出现了一个空白页面,继续 'Inspect Element' 出现了一个空网页:Screenshot of localhost:5000

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

感谢任何帮助,并提前致谢!

请注意,我是网络开发和节点包管理器的新手。

当你开始你的 svelte 项目时,你需要这个命令:

npx degit sveltejs/template my-svelte-project

进入项目后:

cd my-svelte-project

当你在这个项目中时,你 运行:

npm install
npm run dev

在 npm 运行 dev 之后通常你有一个关于 端口应用程序 运行s.

的信息

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

在输入代码之前,您是否有一个 svelte 的欢迎页面?

here你的svelte教程不错

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

要查看 mac 运行 上哪些端口处于活动状态,请使用命令

lsof -nP +c 15 | grep LISTEN

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

PORT=54321 npm run dev

这应该可以解决问题,并且 运行 适合您。

然后您将在

访问它

http://localhost:54321