Vue CLI项目引入本地JS文件报错“Unexpected token ‘”的解决方法
在vue cli项目中引入本地js文件并使用全局变量时，可能会遇到unexpected token '错误。本文将分析该错误的原因，并提供有效的解决方法。
问题描述:
开发者尝试引入一个包含全局变量定义的JS文件（例如test2.js），并在Vue组件中使用这些全局变量。然而，不正确的引入方式或文件路径导致浏览器报错Uncaught SyntaxError: Unexpected token '。
错误示例:
假设test2.js文件内容如下：
立即学习“前端免费学习笔记（深入）”；
/*globals abc_test:true*/abc_test = { a1() { alert("12"); },};
错误的引入方式：在index.html中使用标签引入test.js（实际应为test2.js），并在app.vue组件中使用import语句引入（实际也应为test2.js，且路径错误）。
问题分析:
该错误主要源于以下两点：
错误的引入路径: index.html和app.vue中的JS文件路径不正确。不兼容的模块化方式: Vue CLI项目使用Webpack打包，而直接通过标签引入的JS文件，其内容会被浏览器直接解析。如果该文件包含非标准的JavaScript语法（例如，在非模块环境中定义全局变量的方式），就会导致解析错误。import语句则适用于模块化的JS文件，而test2.js并非以模块方式编写。
解决方法:
正确放置静态资源: 将test2.js文件放置在public目录下，例如public/static/js/test2.js。public目录下的文件不会被Webpack处理，可以直接被浏览器访问。
正确引入静态资源: 在index.html中，使用标签正确引入test2.js：
在Vue组件中直接使用全局变量: 由于test2.js中的全局变量在浏览器环境中已经定义，因此无需在Vue组件中使用import语句引入。直接在app.vue或其他组件中使用abc_test即可：
export default { methods: { }};
通过以上步骤，即可解决Unexpected token '错误，并正确在Vue CLI项目中使用本地JS文件中的全局变量。 记住，public目录是关键，它保证了文件不被Webpack处理，直接在浏览器环境中生效。 避免在Vue组件中使用import来引入这些全局变量的JS文件。
以上就是Vue CLI项目中引入本地JS文件报错Unexpected token ‘的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1562624.html
微信扫一扫 
支付宝扫一扫 
