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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
探索node之事件循环的实现
Oct 30 Javascript
js实现简单商品筛选功能
Feb 02 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
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
详解Golang 与python中的字符串反转
2017/07/21 Python
pandas实现选取特定索引的行
2018/04/20 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
2014年公司植树节活动方案
2014/03/04 职场文书
材料化学专业求职信
2014/07/15 职场文书
政风行风建设责任书
2014/07/23 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle