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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
javascript实现移动端红包雨页面
Jun 23 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 中英文语言转换类代码
2011/08/11 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
js实现目录定位正文示例
2013/11/14 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
django 模型中的计算字段实例
2020/05/19 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
医学生自荐信
2013/12/03 职场文书
中学生校园广播稿
2014/01/16 职场文书
简短大学毕业感言
2014/01/18 职场文书
护理专科自荐书范文
2014/02/18 职场文书
求职信名称怎么写
2014/05/26 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
撤诉申请怎么写
2015/05/19 职场文书
论文答辩开场白大全
2015/05/27 职场文书
安全教育第一课观后感
2015/06/17 职场文书
通讯稿格式及范文
2015/07/22 职场文书
股东出资协议书
2016/03/21 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers