Question

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

未捕获到的SyntaxError：意外令牌<< / p>

它指示错误发生在app.js的第一行，但是我在控制台中检查<实际上是来自index.html的。这意味着在此过程中的某个地方，webpack认为index.html应该以{{1}}的形式进行翻译。

以下是我正在使用的软件包：

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

我该如何解决？

Update01 我删除了整个app.js文件夹并再次删除了node-modules，然后一切似乎都可以正常工作了。但是，如果有人知道为什么会发生这种情况，请分享。

Answer 1

您可能已经在 index.html 的 src 属性中为相对路径使用了“ ./” 前缀>，只需将其替换为“ <％= BASE_URL％>” ，即可正常运行。

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

这种“ ./” 用法不会对正常的Vue路由造成任何问题，但是在您实现动态路由匹配 （{ ：'/ user /：id'，组件：User}） ，您在index.html中带有“ ./” 前缀的引用将无法正常工作！

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

user/js/config.js

即使您的路线具有路线参数（http://yourdomain.com/user/1234），因为您已实现 动态路线匹配 ，并且使用相同的Vue，所以该结构也相同组件（User.vue）。

目前，“ ./” 可能指向 user / 1234 / js / config.js ，因此最终将默认设置为404页面，并且它是一个以“ ” 开头的HTML文件，因此您在<<>中出现 “ Uncaught SyntaxError：Unexpected token <” 您的参考文件的strong>第1行。

Answer 2

我遇到了同样的问题，我尝试了删除节点模块并再次安装npm，但这没有用。

所做的工作是删除所有站点数据。您可以打开Chrome浏览器中的开发标签（Ctrl + Shift + i），然后转到“应用程序”标签，然后点击清除网站数据，以执行此操作。

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

Answer 3

同时卸载CLI和重新安装V3 + Chrome中的“硬”刷新可以解决问题。也许仅进行一次硬刷新就足够了（CTRL + F5）

Answer 4

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

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

如果您的应用程序部署在https://stackoverflow.com/a/56320964/1321009

上，

http://example.com可以正常工作

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

然后，您需要在部署时进行更改，至少可以烦恼。

使用vue.config.js文件只是这样设置

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

Answer 5

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

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

就我而言，它起作用了，问题是第一个控制台中的环境变量被覆盖了。

祝你好运！

Answer 6

当我尝试运行vue ui时出现此错误。当我同时安装vue cli 2.0和3.0时发生了这种情况。

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

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

。

按f12键打开开发人员工具，然后单击并按住刷新按钮，然后选择“清空现金并重新加载”。

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

Answer 7

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

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

如果我这样更改src attr：

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

好，没有错误显示“意外令牌<”。

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

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

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

，然后在vue.config.js中进行如下更改：

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

所以，在线一切都很好，但是在我的本地项目中运行它将得到此错误。

最后，我找到了：

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

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

（ps：test0001参数无法删除，我的项目需要它）

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

我认为构建和开发环境的差异会导致此错误，并且我的参数test0001在URL地址中。

最后，我只是使用param来区分该产品并开发解决该问题。

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

Answer 8

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

Answer 9

它指示错误发生在app.js的第一行，但是我在控制台中，<实际上是来自index.html。意思是在此过程中，webpack认为index.html应该是作为app.js进行翻译。

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

因此，如果您也遇到这种情况，那么问题出在您的后端（对我来说，Javare和urlrewrite的javax.Filter）。因此，如果可以帮助某人，那么这是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>

Answer 10

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

配置：Django（后端）-Vue（前端）-达芙妮-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',
}
});

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

Answer 12

使用serve +版本4.1和所有CLI插件，通过 Vue CLI 3 随机出现此错误。

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

打开Inspection Tools> Application（标签）> Cache Storage（树）>右键单击带有标签Delete的条目上的http://localhost:8080。

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

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

Answer 13

我有同样的问题。对我来说，我可以通过添加“资产”来解决它

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

Answer 14

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

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

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

Answer 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 状态也是如此。

vue cli-未捕获的SyntaxError：意外令牌<

15 个答案: