Uncaught SyntaxError: Unexpected token '<' VueJS PWA答案

【问题标题】：Uncaught SyntaxError: Unexpected token '<' VueJS PWAUncaught SyntaxError: Unexpected token '<' VueJS PWA
【发布时间】：2020-07-07 17:58:22
【问题描述】：

当我生成使用 VueJS 构建的 PWA 的生产版本时，在将其部署到我的服务器后，我在 Google Chrome 中遇到了这个错误：

Uncaught SyntaxError: Unexpected token '<' 在 app.21fde857.js:1 中
Uncaught SyntaxError: Unexpected token '<' 在 chunk-vendors.d1f8f63f.js:1 中

我查看了控制台的“网络”选项卡，在 chunk-vendors.d1f8f63f.js 和 app.21fde857.js 两个文件中，index.html 返回状态为 200。

为什么会这样？

OBS：这在本地非常有效。

【问题讨论】：

查看浏览器收到的对这些文件的响应。以< 开头表示返回的是一个 HTML 页面，可能是 404 或索引页面。

标签： javascript html google-chrome vue.js progressive-web-apps

【解决方案1】：

这是一个不需要手动编辑 dist 资产的解决方案。只需将以下属性添加到 vue.config.js 的导出中：

publicPath: './'

【讨论】：

请对您的回答进行详细解释，以便下一位用户更好地理解您的回答。

【解决方案2】：

在 index.html 中的所有链接上添加（例如：<link href="<%= BASE_URL %>favicon/apple-icon-144x144.png">）
并在head标签中添加base标签（例如：<base href="https://mywebsite.com" />），现在完美运行了。

旧答案

我找到了解决方案。我必须在dist/ 文件夹的 index.html 文件中的每个src 中手动添加一个.。（例如：<link href=./js/chunk-vendors.d1f8f63f.js rel=preload as=script>）

在源代码的index.html中，我在每个链接中都添加了，（例如： <link rel="apple-touch-icon" sizes="144x144" href="<%= BASE_URL %>favicon/apple-icon-144x144.png">），以及和this question一样，但这不起作用，我认为这个错误是因为它而发生的。

【讨论】：