网站导航在Live Server正常，部署到GitHub后失效并报错求助

问题描述 #

学校项目中用JavaScript给简易网站添加导航，本地通过VS Code的Live Server运行时功能正常，但部署到GitHub Pages后：

• 导航不显示
• 出现404错误
• Chrome抛出CORS错误：

Access to script at 'file:///C:/Users/camer/IM_GITHUB/WSOA3028A_2583750/Scripts/menu.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

• 同时提示Failed to load resource: net::ERR_FAILED

文件夹结构：根目录包含Scripts、Blogs、Essays、Portfolio、Design、About文件夹，以及index.html。

相关代码 #

menu.js（Scripts文件夹内）

const root = "/WSOA3028A_2583750"

const menuItems = [
    {name: "Home", href: root + "/index.html"},
    {name: "Blog", href: `${root}/Blogs/index.html`},
    {name: "Essays", href: `${root}/Essays/index.html`},
    {name: "Portfolio", href: `${root}/Portfolio/index.html`},
    {name: "Design", href: `${root}/Design/index.html`},
    {name: "About", href: `${root}/About/index.html`},
];
export function initialise(currentPage){
    console.log("worked")
    const nav = document.querySelector("header > nav")
    const ul = document.createElement("ul")
    for(let menuItem of menuItems)
    {
        const li = document.createElement("li")
        if(currentPage != menuItem.name)
        {
            const a = document.createElement("a")
            a.innerText = menuItem.name
            a.setAttribute("href", menuItem.href)
            li.appendChild(a)
        }
        else{
            li.innerText = menuItem.name
        }
        ul.appendChild(li)
    }
    nav.appendChild(ul)
}

index.html脚本调用部分（根目录）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Cameron Morgan">
  <meta name="description" content="This is the index page of the website displaying the portfolio and blogs for Cameron Morgan in the course Interactive Media  ">
  <meta name="robots" content="index,follow">
  <meta name="keywords" content="Web Development, Game Development, Interactive, Blog, Portfolio, Essay, Design">

    <meta property="og:title" content="Cameron Morgan Portfolio Website">
    <meta property="og:description" content="Welcome to Cameron Morgan's Portfolio Website, here you can find his portfolio of work, including games, websites, blogs, analysis.">
    
    <meta property="og:url" content="https://wits-digital-arts-interactive-media.github.io/WSOA3028A_2583750/">

  <link rel="icon" type="image/png" href="Images/coffee.png">
  <script type="module">
    import { initialise } from "./Scripts/menu.js";
    initialise("Home"); // Call the initialise function with a test argument
</script>
  <title>Interactive Media Website</title>
</head>

解决办法 #

1. 修正脚本导入路径为绝对路径 #

子页面（如Blogs/index.html）使用相对路径./Scripts/menu.js会指向错误位置（Blogs/Scripts/menu.js），导致404。所有页面统一用基于GitHub Pages仓库的绝对路径导入脚本：

<script type="module">
  import { initialise } from "/WSOA3028A_2583750/Scripts/menu.js";
  // 根据当前页面修改currentPage参数，比如Blog页面写initialise("Blog")
</script>

2. 验证文件与路径的一致性 #

• 确保文件夹、文件名大小写与代码中的路径完全匹配（GitHub Pages区分大小写）
• 确认所有子页面（如Blogs/index.html）已正确上传到仓库，无缺失

3. 检查GitHub Pages部署配置 #

• 确认仓库的GitHub Pages已开启，部署来源为目标分支的根目录
• 部署完成后强制刷新页面（Ctrl+Shift+R），避免缓存干扰

4. 排查模块加载问题 #

• 确认脚本文件扩展名是.js，且export/import语法符合ES模块规范
• 检查仓库中Scripts文件夹及menu.js文件是否存在，无上传遗漏

内容的提问来源于stack exchange，提问作者Cameron Morgan