VS Code中Cannot Get /index.html错误及Swup相关问题求助

问题1：路由错误 - Cannot Get /xxx.html #

做Swup页面过渡练习时，创建了index.html、about.html、pricing.html三个文件，此前正常运行，现在持续抛出Cannot Get /index.html、Cannot Get /about.html、Cannot Get /pricing.html错误。问题出在HTML链接的绝对路径斜杠上，但移除斜杠后，Swup的页面过渡效果就无法实现。

示例HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width,
    initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="node_modules/swup/dist/swup.min.js"></script>
    <script defer src="script.js"></script>
</head>  
<body>
    <nav>
        <ul>
            <li><a href="/index.html">Home</a></li>
            <li><a href="/pricing.html">Pricing</a></li>
            <li><a href="/about.html">About</a></li>
        </ul>
    </nav>
    <main id="swup" class="transition-fade">
        <h1>This is the home page</h1>
    </main>
</body>
</html>

（所有HTML文件结构一致，仅<h1>内容对应页面名称）

问题2：script.js中new Swup()下方出现波浪线 #

不确定该波浪线是否会影响代码运行。

示例script.js代码 #

const swup = new Swup()

解决方案 #

针对路由错误 #

• 根本原因：带斜杠的/index.html是绝对路径，直接打开本地HTML文件时，浏览器会将系统根目录（如C:\）作为根路径，而非你的项目文件夹，导致找不到文件；但Swup依赖绝对路径识别路由，才能触发过渡效果。
• 解决办法：
  1. 使用本地服务器运行项目：
     安装Node.js后，在项目根目录执行npx serve，服务器会将项目文件夹作为根目录，此时绝对路径能正确指向对应HTML文件，过渡效果也能正常触发。
  2. 修改为相对路径并配置Swup路由：
     将链接改为相对路径（如index.html、about.html），然后在script.js中初始化Swup时添加路由映射，确保Swup能识别页面跳转：

     const swup = new Swup({
       routes: [
         { from: '/', to: '/index.html' },
         { from: '/index.html', to: '/about.html' },
         { from: '/index.html', to: '/pricing.html' },
         { from: '/about.html', to: '/index.html' },
         { from: '/about.html', to: '/pricing.html' },
         { from: '/pricing.html', to: '/index.html' },
         { from: '/pricing.html', to: '/about.html' }
       ]
     });
     

  3. 简化路由路径：
     将链接改为/（对应index.html）、/about、/pricing，在每个HTML的<head>中添加<base href="/">确保资源路径正确，同时配置服务器默认索引文件为index.html（大部分本地服务器默认支持）。

针对Swup波浪线问题 #

• 原因：编辑器（如VS Code）无法识别全局变量Swup的类型定义，因此抛出语法提示波浪线。
• 解决办法：
  1. 安装Swup类型定义：执行npm install @types/swup --save-dev，编辑器会自动识别Swup API，波浪线消失。
  2. 声明全局变量：在script.js开头添加注释/* global Swup */，告知编辑器Swup是全局变量，也能消除波浪线。
• 注意：该波浪线不会影响代码运行，只要swup.min.js脚本正确加载，页面过渡功能就能正常工作。

内容的提问来源于stack exchange，提问作者Vitor Oliveira