vue项目出现Uncaught SyntaxError: Unexpected token 解决方案

本文介绍了在Vue项目中遇到Uncaught SyntaxError: Unexpected token错误时的解决方案,包括检查引用文件的位置、配置信息、script标签类型以及浏览器缓存。重点提到将包含ES6语法的js文件放入static目录并正确配置webpack.loader,以及处理浏览器缓存问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue项目出现Uncaught SyntaxError: Unexpected token 解决方案
最近在做vue项目时,需要引入一个第三方的js文件,在index.html中通过以下方式引入JS文件编译后,就报了这个问题。

根据广大的网页的思路,导致这一现象的原因可能有以下几种:

原因一.引用文件的位置不正确

js文件放在static文件夹下和放在assets文件夹下的引用方式是不一样的。简而言之:

1.assets用来放置样式、静态图片,只要src下面的组件中用到的资源就放在assets中。

2.static用来放没有npm包的第三方插件,字体文件。

3.assets与components同级 components下的.vue引用静态文件时,相对路径为 …/assets/xxx/…

说明:如果js文件中包含es6语法的话,就不可以放在static文件夹下,因为static文件夹默认是不会被打包和编译的,所以引用的时候会抛异常。

不同之处可以查看这篇博客:https://www.cnblogs.com/huangqiao/p/7798887.html

解决方法:

将src下的文件放到static下面去,在indec.html中的引用路径采用相对路径的表现形式,“./static/xxx/xxxxx.js”

原因二:配置信息不正确

如果你的js文件中包含es6语法,但没有配置采用babel-loader来解析和转化为es5语法的话,也会报这个错误。

解决方法:

需要在webpack.config.js里配置loader,vue-cli是不会帮忙配置的。

然后重新编译项目,就可以解决,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值