vue cli - Uncaught SyntaxError: Unexpected token <答案

【问题标题】：vue cli - Uncaught SyntaxError: Unexpected token <vue cli - Uncaught SyntaxError: Unexpected token <
【发布时间】：2018-12-15 02:04:22
【问题描述】：

我使用vue-cli 3.0 创建我的项目。最初它运行正常。但是在我<ctrl>-c 然后npm run serve 之后，它一直抛出错误：

Uncaught SyntaxError: Unexpected token

它表明错误发生在app.js的第一行，但我在控制台中检查<实际上来自index.html。这意味着在此过程中的某个地方，webpack 认为 index.html 应该转换为 app.js。

以下是我正在使用的包：

vue 3.0.0-rc.3 @vue/cli-plugin-babel ^3.0.0-beta.15 @vue/cli-plugin-eslint ^3.0.0-beta.15 @vue/cli-service ^3.0.0-beta.15

我该如何解决这个问题？

更新01 我再次删除了整个node-modules 文件夹和npm install，然后一切似乎又正常了。但如果有人知道为什么会发生这种情况，请分享。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

尝试将 <base href="/" /> 添加到 index.html 的 <head> 中。希望它会起作用。

【讨论】：

【解决方案2】：

您可能在 index.html 的 src 属性中使用了 "./" 前缀作为相对路径>，只需将其替换为 "" 即可。

//<script src="./js/config.js">
<script src="<%= BASE_URL %>js/config.js">

这种 "./" 用法不会对正常的 Vue 路由造成任何问题，但是当您实施 动态路由匹配 ({ path : '/user/:id', component: User }) 您在 index.html 中带有 "./" 前缀的引用将无法按预期工作！

这是因为 Vue 文件结构会将您的依赖项放在您的路由文件夹中，例如

user/js/config.js

这个结构是一样的，即使你的路由有路由参数 (http://yourdomain.com/user/1234)，因为你实现了 Dynamic Route Matching 并使用相同的 Vue 组件（用户.vue）。

此时，"./" 可能指向 user/1234/js/config.js，因此它最终会转到默认的 404页面，它是一个以 "" 开头的 HTML 文件，因此您在 "Uncaught SyntaxError: Unexpected token in 引用文件的第 1 行。

【讨论】：

【解决方案3】：

我遇到了同样的问题，我尝试删除节点模块并再次 npm install 但没有奏效。

起作用的是删除所有站点数据。您可以通过打开开发选项卡 (Ctrl+Shift+i) 来执行此操作（在 Chrome 中），转到“应用程序”选项卡，单击侧面板上的“清除存储”，然后单击“清除站点数据”按钮。

我的猜测是我仍然有一些旧的服务人员拦截了请求并提供了 html 文件而不是 app.js。因此，如果您之前在 URL“http://localhost:8080”处使用过 PWA，这可能会解决问题。

【讨论】：

【解决方案4】：

// vue.config.js
module.exports = {
  publicPath: '/',
};

您实际上想将 publicPath 添加到您的 vue.config.js 文件中

如果您的应用程序部署在http://example.com，https://stackoverflow.com/a/56320964/1321009 确实可以工作

如果您将其部署在http://example.com/something

那你需要在部署的时候进去改一下，至少可以说很烦。

使用 vue.config.js 文件只需像这样设置它

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/something/'
    : '/'
};

【讨论】：

我不知道为什么，但是你的方法是有效的。

【解决方案5】：

我也有同样的问题。在 index.html 文件中，我只写了这个脚本标签，像这样：

  <script src="./static/js/qrcode.min.js"></script>

如果我像这样更改 src attr：

 <script src="/static/js/qrcode.min.js"></script>

好的，没有错误'Unexpected token

这里又发生了一个问题，让我很沮丧。

在线构建产品测试显示我无法访问此站点并获取资源。我的天啊！好的，我再次像这样更改此 src：

<script src="./static/js/qrcode.min.js"></script>

然后像这样在 vue.config.js 中进行一些更改：

baseUrl:'./'
assetsDir:'./'

所以，在线一切正常，但在我本地项目运行时会出现此错误。

我终于找到了：

在线url地址：http://xxxxx.cn/test0001/#/

本地url地址：http://192.168.5.108:9000/test0001/#/

(ps:test0001 参数无法移除，我的项目需要它)

如果我删除此参数“test0001”，则此错误不会显示在我的本地项目 test 中。

我猜是构建和开发环境的不同导致了这个错误，我的参数是 url 地址中的 test0001。

最后，我只是使用一个参数来区分这个产品和开发来解决它。

如果有人像我一样遇到这个问题，请分享你的解决方案。

【讨论】：

为了得到一个有用的答案，这个反应需要扩展。解释为什么这是问题的答案。

【解决方案6】：

卸载两个 CLI 并重新安装 V3 + Chrome 中的“硬”刷新就可以了。也许仅仅硬刷新就足够了（CTRL + F5）

【讨论】：

【解决方案7】：

我假设您使用与vue ui 或vue create 相同的控制台窗口来启动项目？

然后尝试打开一个新的控制台实例并在其中运行您的项目。

在我的情况下它有效，问题是第一个控制台中的环境变量被覆盖。

祝你好运！

【讨论】：

我只使用vue create，它在不同的控制台。

【解决方案8】：

我在尝试运行 vue ui 时遇到此错误。这发生在我安装 vue cli 2.0 和 3.0 时。

所以我卸载了两者并安装了 3.0 然后：

我所要做的就是清空缓存并在 chrome 中硬重新加载。

按 f12 打开开发者工具，然后单击并按住刷新按钮，然后选择空现金和硬重新加载。

我不确定这是否与您的具体问题有关。

【讨论】：

【解决方案9】：

它表明错误发生在app.js的第一行，但我在控制台中检查

在我的情况下恰恰相反：我添加了一个 url 重写问题。一个非常广泛的规则使我的 js 和 css 资产被重定向到 index.html，这就是为什么我在我的 js 或 css 文件的开头添加一个

因此，如果您也是这种情况，那么问题出在您的后端（Java Spring 和 javax.Filter 用于我的 urlrewrite）。因此，如果它可以帮助某人，这是 urlrewrite.xml 的正确部分：

<rule match-type="wildcard">
  <from>/assets/**</from>
  <to last="true">-</to>
 </rule>

 <rule match-type="wildcard">
   <from>/index.html</from>
     <to last="true">-</to>
 </rule>

 <rule match-type="wildcard">
   <from>/**</from>
     <to>/index.html</to>
 </rule>

【讨论】：

【解决方案10】：

当我尝试将 javascript 文件链接到 index.html 时，我遇到了同样的错误。

配置：Django（后端）- Vue（前端）- Daphne - Nginx。

Django urls.py 通过定义的视图将每个连接（除了先前定义的，例如 API）路由到 index.html 到 'vuejs/index.html'。 javascript 文件需要通过{% include "path" %} 合并并通过Django 呈现。双花括号 {{}} 对 Django 有意义，这就是为什么需要在 Javscript 文件中将分隔符更改为 ['[[', ']]'] 的原因（参见 main.js）。

vuejs/index.html:

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
[[name]]
</div>
<script>
{% include "vuejs/src/main.js" %}
</script>
</body>
</html>

vuejs/src/main.js：

new Vue({
delimiters: ['[[', ']]'],
el: '#vue-app',
data: {
name: 'Vodka Gorbatschow',
}
});

【讨论】：

【解决方案11】：

在使用 Vue CLI 3.10 部署到 Azure Web 服务器上的子目录时，我遇到了同样的问题。在我们将路由从历史记录更改为导致此错误的哈希模式之前，我们的网站一直很好。

我必须更改 index.html 页面中的链接才能使其正常工作。

部署构建为您提供了这个...

<link href=/css/chunk-095570c7.ceb55529.css rel=prefetch>

...但是我们必须将其更改为以下内容才能正常工作...

<link href="css/chunk-095570c7.ceb55529.css" rel=prefetch>

【讨论】：

【解决方案12】：

使用带有所有 CLI 插件的 Vue CLI 3 使用 serve + 4.1 版随机遇到此错误。

尽管我在网络浏览器inspection tools 中启用了Disabled Cache 事件，但我必须通过清除Cache Storage 来解决此问题以进行本地开发：

打开Inspection Tools > Application（选项卡）> Cache Storage（树）> 在标签以http://localhost:8080 结尾的条目上右键单击Delete。

我没有尝试右击Cache Storage > Refresh Caches，可能也可以吗？

如果您在生产中遇到此问题，这对您来说不是解决方案，您需要通过其他方式解决此问题，以确保您的应用能够正常运行不知道这样做的最终用户...

【讨论】：

【解决方案13】：

我遇到了同样的问题。对我来说，我通过添加“资产”来解决它

<script src="{{ asset('js/app.js') }}" defer></script>

【讨论】：

【解决方案14】：

我在这里遇到了同样的错误，这只是我在部署应用程序时发生的情况，它在本地环境中运行良好。
经过一番搜索，我在下面publicPath上遵循了vue-cli的官方指导：

如果您计划部署您的站点，则需要设置 publicPath 在子路径下，例如 GitHub Pages。如果您计划部署你的网站到https://foo.github.io/bar/，那么 publicPath 应该是设置为“/bar/”。在大多数情况下，请使用 '/' ！！！细节： https://cli.vuejs.org/config/#publicpath

我将 publicPath 从 '/' 更改为 '/bar/' 并且错误消失了。

【讨论】：

【解决方案15】：

我在尝试部署 Vue 3 应用程序时遇到了同样的问题。看起来所有文件的状态都是 200，但实际上它只是每个文件的 index.html 页面。浏览器期望获得 .js 或 .css 文件，但从<html><head> ...等开始。这就是为什么它显示错误“意外的令牌

app.use(express.static(__dirname + "/dist"));

app.get("*", function(req, res) {
    res.sendFile(__dirname + "/dist/index.html");
});

您可以通过在地址栏中输入文件的 URL 来检查您的文件是否下载正确。浏览器应正确显示其内容。如果您看到空白页面，则意味着您得到了其他内容，即使在“网络”选项卡中您看到 200 状态。

【讨论】：

【解决方案16】：

我也使用了上面提到的这个设置，它突然导致了同样的错误（重新启动我的 mac 后，我知道这听起来很奇怪，但我所做的包更新是很久以前的）：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/something/'
    : '/'
};

将 '/' 更改为 '' 后一切正常。

【讨论】：

【解决方案17】：

我在使用 Vue Js 构建单页应用程序时也遇到了同样的问题。

我注意到的是它没有指向正确的部分。文件丢失。所以只需检查该文件是否存在于 static/Js 文件夹中。

或者检查指针以确保您指向正确的文件。

【讨论】：

【解决方案18】：

在文件vue.config.js中，确保有：

module.exports = {
  publicPath: '/',
};

【讨论】：