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 相关文章推荐
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
javascript实现下拉菜单效果
Feb 09 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
一个odbc连mssql分页的类
2006/10/09 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
详解JavaScript的变量
2019/04/04 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
Element Rate 评分的使用方法
2020/07/27 Javascript
python自动安装pip
2014/04/24 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
大学社团活动策划书
2014/01/26 职场文书
消防宣传语大全
2015/07/13 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android