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 常见开发使用技巧总结
Dec 26 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
js实现自动锁屏功能
Jun 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中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
js如何打印object对象
2015/10/16 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python 接口_从协议到抽象基类详解
2017/08/24 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
公司总经理岗位职责范本
2014/08/15 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
如何利用Python实现一个论文降重工具
2021/07/09 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL