GitHub 页面 - 现场出现意外令牌“<”,本地没有问题

问题描述

几个月前我使用 Vue 创建了一个 GitHub 页面站点(URL:https://wintersen.github.io/),运行良好。今天(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": "/"
}

解决方法

您的代码正在请求 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 '<'

,

@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>

相关问答

错误1:Request method ‘DELETE‘ not supported 错误还原:...
错误1:启动docker镜像时报错:Error response from daemon:...
错误1:private field ‘xxx‘ is never assigned 按Alt...
报错如下,通过源不能下载,最后警告pip需升级版本 Requirem...