在 M1 MacBook Air 上運行 Sveltejs 模板時出現黑屏

Question

我正在學習 Sveltejs，直到現在我一直在使用https://svelte.dev/repl/來完成教程，該教程運行良好。

但是，我想從我的機器（MacBook Air M1）上開發和運行 Sveltejs 應用程序 - 所以我下載了提供的 sveltejs 文件並在 VS Code 中打開它。

我安裝了 node_modules npm install 。 然后，我運行npm run dev似乎沒有產生錯誤

然而，當我打開 http://localhost:5000 時，會看到一個空白頁面，繼續“Inspect Element”會顯示一個空網頁： localhost:5000 的截圖

我從https://svelte.dev/repl/下載了這個模板——我沒有對這個項目做任何更改，但它仍然出現故障。

任何幫助表示贊賞，並提前感謝您！

應該注意的是，我是 Web 開發和節點包管理器的新手。

Answer 1

當你啟動你的 svelte projest 時，你需要這個命令：

npx degit sveltejs/template my-svelte-project

在你去你的項目之后：

cd my-svelte-project

當你在這個項目中時，你運行：

npm install
npm run dev

通常在 npm run dev 之后，您將獲得有關女巫端口應用程序運行的信息。

然后你去 src 和 App.svelte 並默認你的代碼替換代碼。 通常它必須工作。

在放置代碼之前，您是否有一個 svelte 的歡迎頁面？

在這里你有一個很好的苗條教程。

Answer 2

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