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 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
JavaScript将数组转换为链表的方法
Feb 16 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
如何删除多级目录
2006/10/09 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
php实现无限级分类
2014/12/24 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
微信小程序实时聊天WebSocket
2018/07/05 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
JAVA程序员面试题
2012/10/03 面试题
元旦晚会邀请函
2014/01/27 职场文书
财务人员担保书
2014/05/13 职场文书
战友聚会策划方案
2014/06/13 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
党员三严三实心得体会
2014/10/13 职场文书