vue cli项目中引入本地js文件并使用全局变量时遇到的错误
在使用Vue CLI创建项目并尝试引入本地JS文件，定义全局变量并在Vue组件中使用时，可能会遇到“Unexpected token ‘
问题描述：
开发者尝试创建一个包含全局变量的JS文件(test2.js)，并在Vue组件中使用该全局变量。 项目结构如图所示（此处省略图片），test2.js文件内容如下：
/*globals abc_test:true*/abc_test={ a1(){ alert("12"); },};
登录后复制
index.html中引入test.js文件（此处test.js为示例，实际问题中可能为test2.js或其他名称，文章根据问题内容调整了文件名）：
立即学习“前端免费学习笔记（深入）”；
登录后复制
在App.vue组件中引入并使用test.js中定义的全局变量：
import {tb} from '/static/js/test.js' // ...
登录后复制
编译后运行项目，却出现“Uncaught SyntaxError: Unexpected token ‘
问题分析与解决：
错误信息“Unexpected token ‘标签引入，然后在Vue组件中使用import语句引入，这种方式是错误的。 import语句是ES Module语法，用于在Webpack等模块打包工具中导入模块。而直接通过标签引入的JS文件，并不符合ES Module规范，因此导致了错误。
正确的做法是将静态资源文件（例如test.js）放置在public目录下，这样Vue CLI会直接将它们复制到输出目录，而不会进行任何处理。 或者，将文件放在src目录下，Vue CLI会将其作为模块进行处理，然后在需要的地方使用import语句导入。 如果希望将静态资源放置在src目录下的static文件夹，则需要在vue.config.js文件中配置assetsDir选项为’static’，使得webpack能够正确识别和处理这些文件。
总而言之，解决此问题需要正确配置静态资源路径并根据文件位置选择合适的引入方式。 将JS文件放置在public目录下，并通过标签引入，或者将JS文件放置在src目录下，并使用import语句引入，都是可行的方案。 如果选择将文件放置在src/static目录下，需要配置vue.config.js。
以上就是Vue CLI项目中：如何正确引入本地JS文件并使用全局变量？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2792684.html
