Javascript vue cli - 未捕获的语法错误：意外的令牌 <
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51210795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vue cli - Uncaught SyntaxError: Unexpected token <
提问by sooon
I create my project with vue-cli 3.0. Initially it runs ok. But after I <ctrl>-cthen npm run serveagain, it keep throwing error:
我用vue-cli 3.0. 最初它运行正常。但之后我<ctrl>-c再npm run serve再次，它不断抛出的错误：
Uncaught SyntaxError: Unexpected token <
未捕获的语法错误：意外的标记 <
it indicate that the error happened at the first line of app.js, but I check in console the <is actually from index.html. Which means somewhere along the process, the webpackthought index.htmlshould be transpile as app.js.
它表明错误发生在 的第一行app.js，但我在控制台中检查了<它实际上来自index.html. 这意味着在这个过程中的某个地方，这个webpack想法index.html应该被转换为app.js.
Below are the packages I am using:
以下是我正在使用的软件包：
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
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
How can I resolve this?
我该如何解决这个问题？
Update01I delete the whole node-modulesfolder and npm installagain, then everything seems to work fine again. But if anyone have any idea why this happen, please share it.
Update01我再次删除整个node-modules文件夹npm install，然后一切似乎再次正常工作。但如果有人知道为什么会发生这种情况，请分享。
回答by Saniya syed qureshi
Try by adding <base href="/" />into the <head>of your index.html. Hope it will work.
尝试添加<base href="/" />到<head>您的 index.html 中。希望它会起作用。
回答by Ranjith Kumar
You might have used "./"prefix for Relative path in srcattributes of your index.html, Just replace it with "<%= BASE_URL %>"and it will work fine.
您可能在index.html 的src属性中对相对路径使用了“./”前缀，只需将其替换为“<%= BASE_URL %>”即可正常工作。
//<script src="./js/config.js">
<script src="<%= BASE_URL %>js/config.js">
This "./"usage won't cause any problems with normal Vue Routing but when you are implementing Dynamic Route Matching({ path: '/user/:id', component: User })your references in the index.html with "./"prefix won't work as expected!
This is because Vue file structure will place your dependencies inside your route folder like
这种“./”用法不会对普通 Vue 路由造成任何问题，但是当您实现动态路由匹配({ path: '/user/:id', component: User }) 时，您在 index.html 中的引用为“ ./"前缀不会按预期工作！
这是因为 Vue 文件结构会将您的依赖项放在您的路由文件夹中，例如
user/js/config.js
This structure will be the same, Even when your route has route params (http://yourdomain.com/user/1234) since you have Dynamic Route Matchingimplemented and using the same Vue component (User.vue).
At this time, "./"might point for user/1234/js/config.jsso it ends up going to a default 404 page and it's an HTML file that starts with "< html >", so you are getting "Uncaught SyntaxError: Unexpected token <"in line 1of your referenced file.
这个结构是一样的，即使你的路由有路由参数（http://yourdomain.com/user/1234），因为你实现了动态路由匹配并使用相同的 Vue 组件（User.vue）。
此时，“./”可能指向user/1234/js/config.js所以它最终会进入一个默认的 404 页面，它是一个以"< html >"开头的 HTML 文件，所以你会得到"Uncaught SyntaxError: Unexpected token <"在您引用的文件的第 1 行中。
回答by Evertvdw
I had the same problem, I tried the removing node modules and npm install again but that didn't work.
我遇到了同样的问题，我再次尝试删除节点模块和 npm install 但这没有用。
What did work was removing all the site data. You can do that (in Chrome) by opening the development tab (Ctrl+Shift+i), go to the 'application' tab, click "Clear storage" on the side panel and click on the "Clear site data" button.
有效的是删除所有站点数据。您可以（在 Chrome 中）通过打开开发选项卡 (Ctrl+Shift+i)，转到“应用程序”选项卡，单击侧面板上的“清除存储”并单击“清除站点数据”按钮来执行此操作。
My guess is that I still had some old service-worker that intercepted the request and served the html file instead of the app.js. So if you have used PWA's before at the url "http://localhost:8080" this might solve the problem.
我的猜测是我仍然有一些旧的 service-worker 拦截请求并提供 html 文件而不是 app.js。因此，如果您之前在 url “ http://localhost:8080” 上使用过 PWA，这可能会解决问题。
回答by Remco
Uninstalling both CLI's and reinstalling V3 + A 'hard' refresh in Chrome did the trick. Maybe a hard refresh alone was enough (CTRL + F5)
卸载 CLI 并重新安装 V3 + Chrome 中的“硬”刷新就行了。也许仅硬刷新就足够了（CTRL + F5）
回答by user10510676
I have the same problem. in index.html file , I just write this script tag,like this :
我也有同样的问题。在 index.html 文件中，我只写了这个脚本标签，就像这样：
<script src="./static/js/qrcode.min.js"></script>
if I change src attr like this:
如果我像这样更改 src attr：
<script src="/static/js/qrcode.min.js"></script>
ok, no error 'Unexpected token <' dispaly.
好的，没有错误“意外令牌<”显示。
here is a another problem happened,it is upsetting to me .
这里发生了另一个问题，这让我很沮丧。
online build product tests that dispaly I can't access this site and get resource. OMG ! ok, I change this src again like this:
显示我无法访问此站点并获取资源的在线构建产品测试。我的天啊 ！好的，我再次更改此 src 如下：
<script src="./static/js/qrcode.min.js"></script>
and then make some changes in vue.config.js like this:
然后在 vue.config.js 中进行一些更改，如下所示：
baseUrl:'./'
assetsDir:'./'
so,online everything is ok ,but in my local project run it will get this error.
所以，在线一切正常，但在我的本地项目中运行它会得到这个错误。
finally,I find this :
最后，我发现这个：
online url address: http://xxxxx.cn/test0001/#/
在线网址：http: //xxxxx.cn/test0001/#/
local url address: http://192.168.5.108:9000/test0001/#/
本地url地址：http: //192.168.5.108: 9000/test0001/#/
(ps:test0001 params can't remove,my project need it)
（ps：test0001 参数无法删除，我的项目需要它）
if I remove this params 'test0001', this error isn't display in my local project test .
如果我删除此参数“test0001”，则此错误不会显示在我的本地项目 test 中。
I guess build and development environment's difference cause this error,and my params test0001 in url address.
我猜构建和开发环境的差异导致了这个错误，我的参数 test0001 在 url 地址中。
finally,I just use a param to diff this product and development to solve it.
最后，我只是使用一个参数来区分这个产品和开发来解决它。
if someone meet this problem like me , please share your solution.
如果有人像我一样遇到这个问题，请分享您的解决方案。
回答by abann sunny
I got this error when I tried to run vue ui. This happened when I installed vue cli 2.0 along with 3.0.
当我尝试运行 vue ui 时出现此错误。这发生在我安装 vue cli 2.0 和 3.0 时。
So i uninstalled both and installed 3.0 and then:
所以我卸载了两者并安装了 3.0 然后：
All I had to do was a empty cache and hard reload in chrome.
我所要做的就是在 chrome 中创建一个空缓存和硬重新加载。
Open up the developer tools by pressing f12 and then click and hold the refresh button then select empty cash and hard reload.
按 f12 打开开发人员工具，然后单击并按住刷新按钮，然后选择空现金和硬重新加载。
I am not sure if this is related to your specific issue.
我不确定这是否与您的具体问题有关。
回答by Thomas
I assume you are using the same console window that you used for vue uior vue createto start the project?
我假设您使用的控制台窗口与您用于vue ui或vue create启动项目的控制台窗口相同？
Then try to open a new console instance and run your project in it.
然后尝试打开一个新的控制台实例并在其中运行您的项目。
In my case it worked and the problem was a overwriten enviroment variable in the first console.
在我的情况下，它起作用了，问题是第一个控制台中的环境变量被覆盖。
Wish you luck!
祝你好运！
回答by SheensP
I had the same issue when deploying to a sub directory on our Azure web server using Vue CLI 3.10. Our site was fine until we changed the routing from history to hash mode which caused this error.
使用 Vue CLI 3.10 部署到 Azure Web 服务器上的子目录时，我遇到了同样的问题。我们的网站很好，直到我们将路由从历史记录更改为哈希模式导致此错误。
I had to change the links in the index.htmlpage to get it working.
我必须更改index.html页面中的链接才能使其正常工作。
The deployment build gives you this...
部署构建为您提供了这个......
<link href=/css/chunk-095570c7.ceb55529.css rel=prefetch>
…but we had to change it to the following for it to work...
...但我们必须将其更改为以下内容才能使其正常工作...
<link href="css/chunk-095570c7.ceb55529.css" rel=prefetch>
回答by Marc
Ran into this error randomly with Vue CLI 3using serve+ version 4.1 with all the CLI plugins.
使用带有所有 CLI 插件的Vue CLI 3serve和 4.1 版随机遇到此错误。
Event though I have Disabled Cacheenabled in the web browsers inspection toolsI had to resolve this for local development by clearing a Cache Storage:
尽管我Disabled Cache在 Web 浏览器中启用了事件，但我必须inspection tools通过清除一个来解决这个本地开发问题Cache Storage：
Open Inspection Tools> Application(tab) > Cache Storage(tree) > Right Click Deleteon an entry that has a label ending with http://localhost:8080.
打开Inspection Tools> Application（选项卡）> Cache Storage（树）> 右键单击Delete标签以 结尾的条目http://localhost:8080。
I did not tryRight Click on Cache Storage> Refresh Caches, might also work?
我没有尝试右键单击Cache Storage> Refresh Caches，也可以吗？
If you are having this issue in production, this is not the answerfor you, you need to resolve this in some other manner to ensure your app functions for your end users who wont know to do this...
如果您在生产中遇到此问题，这不是您的答案，您需要以其他方式解决此问题，以确保您的应用程序为不知道这样做的最终用户提供功能...
回答by sanchaz
// vue.config.js
module.exports = {
publicPath: '/',
};
You actually want to add the publicPath to your vue.config.js file
您实际上想将 publicPath 添加到您的 vue.config.js 文件中
https://stackoverflow.com/a/56320964/1321009does work if you application is deployed at http://example.com
如果您的应用程序部署在http://example.com，则https://stackoverflow.com/a/56320964/1321009确实有效
If you deployed it at http://example.com/something
如果您将其部署在http://example.com/something
Then you would need to go in and change it when deploying, annoying to say the least.
然后你需要在部署时进入并更改它，至少可以说很烦人。
with vue.config.js file just set it like this
使用 vue.config.js 文件就这样设置
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/something/'
: '/'
};
