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 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
flexible.js实现移动端rem适配方案
Apr 07 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
python中对数据进行各种排序的方法
2019/07/02 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
Python timeit模块的使用实践
2020/01/13 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
小学教师管理制度
2014/01/18 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
利用Python多线程实现图片下载器
2022/03/25 Python
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python