对于我的学校项目,我们正在使用 JavaScript 添加到简单网站的导航。我正在使用 Visual Studio Code 和实时服务器扩展。当我通过实时服务器扩展运行网站时,它工作正常。这里
但是,当我部署到 github 并访问该网站时,导航不会出现,并且出现 404 错误here
this is my menu.js file that sits in the scripts folder
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)
}
this is where i call the menu.js script in my index.html file that sits outside the folders
<!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>
Chrome 抛出 CORS 错误
从源“null”访问“file:///C:/Users/camer/IM_GITHUB/WSOA3028A_2583750/Scripts/menu.js”处的脚本已被 CORS 策略阻止:仅协议方案支持跨源请求: http、数据、独立应用程序、chrome 扩展、chrome、https、chrome 不受信任。
和
加载资源失败:net::ERR_FAILED
这是一个部署问题。在本地看来,您的脚本文件夹名为
Scripts
,但在 GitHub 上它名为 scripts
。地址区分大小写。将 GitHub 上的脚本文件夹重命名为 Scripts
应该可以解决此问题。