Vue项目报错:Uncaught SyntaxError: Unexpected token


Posted in Javascript onNovember 10, 2018

遇到问题:

今天做一个 VUE 的项目,在引入第三方依赖的 JS 文件时,遇到了一个问题:

Vue项目报错:Uncaught SyntaxError: Unexpected token

控制台的提示:Uncaught SyntaxError: Unexpected token <

按照提示进入文件,再看如下图:

Vue项目报错:Uncaught SyntaxError: Unexpected token

仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的。

解决方案:

解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下,引入路径也改成:<script src="./static/utils/sockjs.js"></script>,这样就不报错了!

总结:

1、assets文件夹与static文件夹的区别

区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了

区别二:assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,在script下必须用@import的方式引入而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入,

2、

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

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

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

3、vue如何引入其它静态文件:

(1)src目录下的资源只能import或require。

(2)想静态引入的话,建立一个与src同级的目录例如static,然后把静态资源放入该文件夹下,html的引入路径如下:./static/...(注:试过一定要放在static文件夹下,否则报错)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 #Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 #Javascript
微信小程序实现跑马灯效果
Oct 21 #Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 #Javascript
vue.js自定义组件directives的实例代码
Nov 09 #Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 #Javascript
webpack 静态资源集中输出的方法示例
Nov 09 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
javascript 常用方法总结
2009/06/03 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python和C语言混合编程实例
2014/06/04 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
如何写一份好的自荐信
2014/01/02 职场文书
关于逃课的检讨书
2014/01/23 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
配置nginx负载均衡
2022/05/06 Servers
mysql查找连续出现n次以上的数字
2022/05/11 MySQL