vue如何引入js文件_vue中引入外部js好麻烦

vue如何引入js文件_vue中引入外部js好麻烦js文件一定要放在static下面,不可放在assets下面,因为assets下面的内容最终是要被打包的,而static下面的内容是不用打包直接放过去的;摘自:https://www.jb51.net/article/150517.htm遇到问题:今天做一个VUE的项目,在引入第三方依赖的JS文件时,遇到了一个问题:控制台的提示:UncaughtSyntaxError:Unexpectedtoken<按照提示进入文件,再看如下图:仔细看了看..

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

js文件一定要放在static下面,不可放在assets下面,因为assets下面的内容最终是要被打包的,而static下面的内容是不用打包直接放过去的;

 

 

摘自:https://www.jb51.net/article/150517.htm

遇到问题:

今天做一个 VUE 的项目,在引入第三方依赖的 JS 文件时,遇到了一个问题:

vue如何引入js文件_vue中引入外部js好麻烦

控制台的提示:Uncaught SyntaxError: Unexpected token <

按照提示进入文件,再看如下图:

vue如何引入js文件_vue中引入外部js好麻烦

仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的。

解决方案:

解决办法是将第三方依赖的 JS 文件放到 /static 目录下,引入路径也改成:<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文件夹下,否则报错)

 

在static文件中引入jQuery包之后,加入以上配置之后,再项目文件中使用’$’,发现还是会报错 —  eslint报错:’$’ is not defined 

解决:

  eslint认为没有声明,需要在eslintrc.js中加入globals配置

  globals: { 
    '$': false,
    'jquery': false
  }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/184501.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • get, getline, gets, getchar 用法「建议收藏」

    get, getline, gets, getchar 用法「建议收藏」1、cin  1、cin>>  用法1:最基本,也是最常用的用法,输入一个数字:  #include  usingnamespacestd;  main()  {  inta,b;  cin>>a>>b;  cout<

    2022年10月9日
    3
  • pycharm指令_ftp登录及命令行用法

    pycharm指令_ftp登录及命令行用法“阅读本文大概需要3分钟。”相信很多人使用PyCharm来开发Python程序,但却少有人知道,PyCharm实际上有一个命令行程序。通过这个命令行程序可以帮你做很多事…

    2022年8月26日
    8
  • Spring3.0 AOP 具体解释

    Spring3.0 AOP 具体解释

    2021年12月8日
    44
  • 求解逆矩阵的常用三种方法_阿桑的专栏_逆矩阵怎么求最快

    求解逆矩阵的常用三种方法_阿桑的专栏_逆矩阵怎么求最快1.待定系数法矩阵A=1,2-1,-3假设所求的逆矩阵为a,bc,d则从而可以得出方程组a+2c=1b+2d=0-a-3c=0-b-3d=1解得a=3;b=2;c=-1;d=-12.伴随矩阵求逆矩阵伴随矩阵是矩阵元素所对应的代数余子式,所构成的矩阵,转置后得到的新矩阵。我们先求出伴随矩阵A*=-3,-21,1接下来…

    2022年4月19日
    141
  • 插值法综合实例用matlab解决,matlab 插值法「建议收藏」

    插值法综合实例用matlab解决,matlab 插值法「建议收藏」matlab插值法实验五插值法5.1实验目的掌握插值的基本思想与方法,会借助数学软件Matlab求解并讨论其收敛性.5.2实验内容1、Lagrange插值法、Newton插值法的Matlab求解方法,在对Runge现象的观察基础上,了解高次插值的不稳定性及其改进方法;2、熟悉Matlab中的插值求解函数,掌握三次样条插值的Matlab求解;3、会求解某些简单的实际问题.5.3实验步骤5.5.1…

    2022年5月5日
    125
  • 现代语音信号处理笔记 (一)

    现代语音信号处理笔记 (一)本系列笔记对胡航老师的现代语音信号处理这本书的语音处理部分进行总结,包含语音信号处理基础、语音信号分析、语音编码三部分。一开始以为三部分总结到一篇文章里就可以了,但写着写着发现事情并没有那么简单。。。因此还是老老实实的总结吧,扎实的基础最重要。语音信号处理基础语音信号的处理简称语音处理,是用数字信号处理技术对语音信号进行处理的一门学科。语音信号均采用数字方式进行处理,语音信号的数字…

    2022年5月26日
    42

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号