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实现检测浏览器及版本的脚本代码
Jan 22 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
javascript canvas封装动态时钟
Sep 30 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP面向对象概念
2011/11/06 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
jQuery 位置插件
2008/12/25 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python线程同步的实现代码
2018/10/03 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
机电专业毕业生推荐信
2013/11/10 职场文书
班组长岗位职责范本
2014/01/05 职场文书
爱耳日活动总结
2014/04/30 职场文书
解除同居协议书
2015/01/29 职场文书
《确定位置》教学反思
2016/02/18 职场文书
党组织结对共建协议书
2016/03/23 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python