npm live-server站内a链接跳转报Cannot GET错误

Cannot GET /xxx是live-server找不到对应路径资源时返回的标准错误，和页面内容本身无关，核心诱因有两个：

• 导航栏的站内链接没有写全.html文件后缀，live-server默认不会自动给无后缀路径补全后缀，会直接按填写的路径查找资源，匹配不到就抛错
• 如果已经试过补全后缀仍报错，基本是启动live-server时终端工作目录不对，没有切到存放所有HTML文件的站点根目录就执行了启动命令
• 外部链接可正常跳转是因为走完整公网绝对地址，不受本地服务路由规则影响，属于正常现象

1 修正导航链接写法 #

把所有站内跳转的href属性补全完整文件名，同目录文件直接写文件名.html即可，不要在路径前随意加/（加斜杠代表从服务根目录查找资源，启动路径不对时会直接定位失败），修正后的代码如下：

<ul class="navbar__list">
    <li class="navbar__item"><a href="about.html" class="link link--dark">About</a></li>
    <li class="navbar__item"><a href="offerings.html" class="link link--dark">Offerings</a></li>
    <li class="navbar__item"><a href="testimonials.html" class="link link--dark">Testimonials</a></li>
    <li class="navbar__item"><a href="contact.html" class="link link--dark">Contact</a></li>
    <div class="navbar__contact">
      <a href="https://stackoverflow.com/questions/ask" class="btn btn--dark">Book a session</a>
    </div>
  </ul>

2 确认live-server启动路径正确 #

启动服务前，先在终端执行cd命令切换到所有HTML文件存放的站点根目录，再执行启动命令：

# 替换成你自己的站点根目录路径
cd 你的站点文件夹绝对路径
live-server

启动后看终端输出的第一行日志，确认Serving "xxx"后面引号里的路径就是你存放HTML文件的根目录，再访问页面试跳转即可。

不推荐为了省掉.html后缀修改live-server配置：绝大多数线上静态托管服务默认不会自动补全文件后缀，本地单独改规则会导致本地和线上运行逻辑不一致，后续部署时容易出现同样的路径错误，直接写全文件名是兼容性最高的方案。

内容的提问来源于stack exchange，提问作者Alex Hoggett