GitHub 页面 - Live 上出现意外标记“<”，本地没有问题

Question

几个月前，我使用 Vue (URL: https://wintersen.github.io/) 制作了一个 GitHub 页网站，效果很好。今天（5/7/21）我注意到当我打开它时，它显示了一个空白页面，其中正在加载我的索引，但控制台报告：

Uncaught SyntaxError: Unexpected token '<' at chunk-vendors.f6a3cd19.js:1 
Uncaught SyntaxError: Unexpected token '<' at app.e3426208.js:1

我对其进行了一些小的更新，再次将我的站点部署到 GitHub 页面以查看它是否有帮助，但没有区别。当我通过 Vue-cli 提供服务时，在本地一切正常。我有点迷路，因为它看起来像是自己坏了...

这是抱怨 < 的部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/wintersen.github.io/favicon.ico">
<title>Erika N Winters</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<link href="/wintersen.github.io/css/app.2c63130d.css" rel="preload" as="style">
<link href="/wintersen.github.io/css/chunk-vendors.93a89b18.css" rel="preload" as="style">
<link href="/wintersen.github.io/js/app.e3426208.js" rel="preload" as="script">
<link href="/wintersen.github.io/js/chunk-vendors.f6a3cd19.js" rel="preload" as="script">
<link href="/wintersen.github.io/css/chunk-vendors.93a89b18.css" rel="stylesheet">
<link href="/wintersen.github.io/css/app.2c63130d.css" rel="stylesheet"></head>
<body>
<noscript><strong>We're sorry but myweb doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id="app"></div>
<script src="/wintersen.github.io/js/chunk-vendors.f6a3cd19.js"></script>
<script src="/wintersen.github.io/js/app.e3426208.js"></script>
</body>
</html>
<style>
html{
    scroll-behavior: smooth;
  }</style>

Chrome 工具说我的一些文件被解释为样式表，但它们是 MIME 类型 text/html。这可能是相关的吗？

回购是 https://github.com/wintersen/wintersen.github.io，非常感谢您的帮助。

解决方案 (5/10/21)

正如@allan-chain 所指出的，我的代码请求了错误的文件路径——如果我没记错的话，我必须为我的 Vue.config 提供完整的 wintersen.github.io 路径它的主页以便正确重定向，但现在它加倍了 url。所以解决方案就是编辑我的 vue.config.js.

vue.config.js

module.exports = {
  "publicPath": "/"
}

Answer 1

您的代码正在请求 https://wintersen.github.io/wintersen.github.io/js/app.e3426208.js，但它应该是 https://wintersen.github.io/js/app.e3426208.js。所以 src / link 应该是 /js/app.e3426208.js 或 //wintersen.github.io/js/app.e3426208.js.

我无法回到过去，但我猜它以前有用，因为 GitHub 将 https://wintersen.github.io/wintersen.github.io/js/app.e3426208.js 重定向到 https://wintersen.github.io/js/app.e3426208.js。但是现在 GitHub 只是重定向到 https://wintersen.github.io，返回一个 HTML 页面，导致 Unexpected token '<'

Answer 2

@allan-chain的答案是正确的，但我想补充一点，请将<style>标签放在HTML内。

请从代码中删除 <base href="https://wintersen.github.io/">（如果您使用它）：

<!DOCTYPE html><html lang="en"><head><base href="https://wintersen.github.io/">
<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/favicon.ico">
<title>Erika N Winters</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<link href="/css/app.2c63130d.css" rel="preload" as="style">
<link href="/css/chunk-vendors.fb5953f7.css" rel="preload" as="style">
<link href="/js/app.3a66a1e0.js" rel="preload" as="script">
<link href="/js/chunk-vendors.8cae5d72.js" rel="preload" as="script">
<link href="/css/chunk-vendors.fb5953f7.css" rel="stylesheet">
<link href="/css/app.2c63130d.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but our site doesn't work properly without JavaScript. Please enable it to continue.</strong></noscript>
<style>html{scroll-behavior: smooth;}</style>
<div id="app"></div>
<script src="/js/chunk-vendors.8cae5d72.js"></script>
<script src="/js/app.3a66a1e0.js"></script>
</body></html>

GitHub 页面 - Live 上出现意外标记“<”，本地没有问题

GitHub Pages - Unexpected Token '<' on Live, no issue on Local

vue.js

github-pages

unexpected-token

解决方案 (5/10/21)