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的图片懒加载js
Jun 30 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
简单实现js上传文件功能
Aug 21 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
JS实现简单tab选项卡切换
Oct 25 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 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安全编程之加密功能
2006/10/09 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
BootStrap modal实现拖拽功能
2018/12/01 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python实现的Kmeans++算法实例
2014/04/26 Python
跟老齐学Python之Import 模块
2014/10/13 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python小白切忌乱用表达式
2020/05/29 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
党校自我鉴定范文
2013/10/02 职场文书
同学聚会主持词
2014/03/18 职场文书
大班幼儿评语大全
2014/04/30 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
五四青年节活动总结
2015/02/10 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
Python办公自动化PPT批量转换操作
2021/09/15 Python
python flappy bird小游戏分步实现流程
2022/02/15 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang