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 parseInt与Number函数的区别
Jan 21 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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数据库抽象层 PDO
2011/05/07 PHP
php截取中文字符串函数实例
2015/02/23 PHP
php 类自动载入的方法
2015/06/03 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
详解jquery uploadify 上传文件
2013/11/09 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Mac下安装vue
2018/04/11 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
Python程序设计入门(4)模块和包
2014/06/16 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
一年级小学生评语
2014/04/22 职场文书
生产助理岗位职责
2014/06/18 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
英语教师求职信范文
2015/03/20 职场文书
教师旷工检讨书
2015/08/15 职场文书
求职自我评价参考范文
2019/05/16 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android