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和C#中使用正则表达式匹配a标签
Nov 26 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
vue实现选中效果
Oct 07 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP中SESSION过期设置
2021/03/09 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python新手实现2048小游戏
2015/03/31 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
python使用mysql数据库示例代码
2017/05/21 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
高中毕业生自我鉴定
2013/11/03 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
环保倡议书400字
2014/05/15 职场文书
2014年会计工作总结
2014/11/27 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
个人年终总结结尾
2015/03/06 职场文书
步步惊心观后感
2015/06/12 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python