Javascript 模塊在 github 頁面上不起作用

Question

我使用本地服務器（使用實時服務器 VS 擴展）構建了一個項目，該項目工作正常。

在這個項目中，我使用 javascript 模塊，所以在 index.html 中，我有：

<script src="js/index.js" type="module"></script>

在 index.js 中：

import {} from "/js/home.js";
import {} from "/js/filter.js";
import {} from "/js/scroll.js";

當我嘗試使用 github 頁顯示網站時，問題就來了。 似乎找不到 JS 文件，瀏覽器控制台返回：

home.js:1 資源加載失敗：服務器響應狀態為 404() filter.js:1 資源加載失敗：服務器響應狀態為 404()

我嘗試更改路徑但沒有成功，而且我不知道為什么在本地一切正常但在 github 頁面上卻不行

Answer 1

也許路徑中的點可以幫助您import {} from "./js/home.js";

Answer 2

作為一個相對較新的編碼器，我的 JavaScript 模塊也遇到了同樣的問題。

我的頁面在我的本地實時服務器上工作，不會部署在 GitHub 上。

可能是您使用的路徑沒有指向您的 JS 腳本所在的正確位置。 也許您需要使用正斜杠前面帶點的相對路徑，例如./而不是/

這樣，它指向您的本地存儲庫文件夾。

我想如果你只是將它設置為正斜杠/ ，它指向你的 GitHub 頁面的根目錄而不是你的本地存儲庫。

在我的例子中，我的 web 頁面在我更改我的index.html中的腳本源后正確加載：

<script type="module" src="/js/main.js"></script>

到：

<script type="module" src="./js/main.js"></script>