今天在vue项目里集成静态js文件,知道大体思路是将js文件放到项目里的某个位置,然后在index.html中用script标签引入js文件,因为index.html是整个vue项目的一个访问入口,所以在这里引入的js可以全局使用。但是在集成的过程中依然遇到了一些问题。

先说下在vue-cli3.0以上版本中集成的正确方式:
1.将js文件放入public文件夹下
在这里插入图片描述
2.在index.html中引入js文件
在这里插入图片描述
这样就可以直接在vue中使用静态js了。

尝试过程与遇到的问题:
js文件放在src/assets文件夹下,引用方式不变
放在这里运行时浏览器控制台就会出现这样的错误Uncaught SyntaxError: Unexpected token ‘<’,
这是因为在assets中的文件需要采用模块化方法导出和引入,引入时需使用import,打包时会按照webpack的规则打包,因为js文件不打算修改,所以这样的方式就只能放弃。

js文件放在static文件夹下,引用方式不变
查阅资料,js文件需要放在与src同级的static文件夹下,在这里的文件打包时不会按照webpack规则打包,会原样放入打包后的static中,尝试之后发现还是会出现Uncaught SyntaxError: Unexpected token '<'错误,这是因为这种方式适用于vue-cli版本为2.x的情况,而我的版本是4.3.1
查看vue-cli版本
最后
如果在测试过程中出现 “XX undefined”类似的错误,可以清理IDE缓存及浏览器缓存再进行测试。
2021/3/30补充
如果在测试过程中出现 “XX undefined”类似的错误,也可能是因为开启了Eslint检查,关掉应该就可以了。

如有不对的地方,欢迎评论指出哦~

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐