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的仿照flash放大图片效果代码
Mar 16 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
JScript的条件编译
2007/05/29 Javascript
ppk谈JavaScript style属性
2008/10/10 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
Python常用的爬虫技巧总结
2016/03/28 Python
Django返回json数据用法示例
2016/09/18 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
python求最大连续子数组的和
2018/07/07 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
python异常处理try except过程解析
2020/02/03 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
用python实现学生管理系统
2020/07/24 Python
园林资料员岗位职责
2013/12/30 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
远程教育学习心得体会
2016/01/23 职场文书
python小程序之飘落的银杏
2021/04/17 Python
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
CentOS MySql8 远程连接实战
2022/04/19 MySQL