Vue.js 在浏览器中出现意外令牌，但 npm 运行构建没有错误答案

【问题标题】：Vue.js unexpected token in browser but npm run build with no errorsVue.js 在浏览器中出现意外令牌，但 npm 运行构建没有错误
【发布时间】：2018-08-01 14:26:51
【问题描述】：

我正在使用其他人启动的 vue.js 项目，并将其放在生产服务器上。 npm run build 编译没有错误。但是当我尝试在浏览器中运行该项目时，我得到了一个

Uncaught SyntaxError: unexpected token <

这是index.html

<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>tst-apps-suite</title><base href=/ ><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel=stylesheet><link href="https://fonts.googleapis.com/css?family=Dosis:200,400,600,700,800" rel=stylesheet><link href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet><link href=/static/css/app.d79e04c40fa9145fe427147ef17b4576.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.bfe581b46b720086662f.js></script><script type=text/javascript src=/static/js/app.19024fb1db555dd8417b.js></script></body></html>

我知道所有 3 个 .js 资产文件。

请求的服务器控制台输出。看起来文件正在返回：

GET /static/css/app.d79e04c40fa9145fe427147ef17b4576.css 200 1.580 ms - 820
GET /static/js/manifest.2ae2e69a05c33dfc65f8.js 200 3.095 ms - 820
GET /static/js/app.19024fb1db555dd8417b.js 200 3.157 ms - 820
GET /static/js/vendor.bfe581b46b720086662f.js 200 3.429 ms - 820

知道如何解决这个问题吗？

【问题讨论】：

它没有显示语法错误所在的行吗？
没有。我希望它做到了。当我在控制台中单击文件时，它会将我带到 index.html 的开头

标签： vue.js

【解决方案1】：

在不同的选项卡上打开每个脚本的 URL（或检查开发人员工具的网络选项卡），这些 URL 可能返回 404（或其他一些错误代码）和 HTML 错误页面。

因此，您的代码会尝试将那些 HTML 错误页面解析为 JavaScript 代码，从而产生该错误。

它会得到Uncaught SyntaxError: Unexpected token <，因为它试图将 HTML 内容（例如 <html> ...）解析为 JavaScript 代码。

运行下面的sn-p，在控制台看到错误。

<script type=text/javascript src=https://stackoverflow.com></script>
Check the console: "Uncaught SyntaxError: Unexpected token <"

【讨论】：

我更新了我的问题以显示文件从服务器获得 200。当我尝试在另一个窗口中打开单个 JS 文件时也会出现同样的错误。
nodejs 控制台的 200 ok 是误报。它并没有真正返回静态资产。我修复了公共资产目标，它开始工作了。
@jtlindsey 您好，我遇到了同样的问题，您能否更准确地说明您是如何解决的？
太好了，这个解决方案对我有用。我忘记使用扩展名.js 和<script type="application/javascript" src="{{ asset('app-assets/js/core/app-menu.js') }}"></script> 从View Page Source 手动打开 URL 解决了我的问题。

【解决方案2】：

在我的情况下，这是由于 the public path in my vue config 正在寻找像“/mywidget/”这样的静态路径并在“/mywidget/dist/1234.js”中寻找资产，这是一个问题，因为在我的部署上下文中没有“mywidget”文件夹供构建的 html 查找 js 文件。

在我的情况下，我再次将公共路径设置为“/”并且它起作用了。

【讨论】：