Vue CLI项目中：如何正确引入本地JS文件并使用全局变量？

vue cli项目中引入本地js文件并使用全局变量时遇到的错误

在使用Vue CLI创建项目并尝试引入本地JS文件，定义全局变量并在Vue组件中使用时，可能会遇到“Unexpected token '<' (at x.js)”的错误。本文将详细分析此问题，并提供解决方案。

问题描述：

开发者尝试创建一个包含全局变量的JS文件(test2.js)，并在Vue组件中使用该全局变量。 项目结构如图所示（此处省略图片），test2.js文件内容如下：

/*globals abc_test:true*/

abc_test={
    a1(){
        alert("12");
    },
};

index.html中引入test.js文件（此处test.js为示例，实际问题中可能为test2.js或其他名称，文章根据问题内容调整了文件名）：

立即学习“前端免费学习笔记（深入）”；

<script type="text/javascript" src="/static/js/test.js"></script>

在App.vue组件中引入并使用test.js中定义的全局变量：

笔目鱼英文论文写作器

写高质量英文论文，就用笔目鱼

87

查看详情

<script>
import {tb} from '/static/js/test.js' 
// ...
</script>

编译后运行项目，却出现“Uncaught SyntaxError: Unexpected token '<' (at x.js)”错误。

问题分析与解决：

错误信息“Unexpected token '<'”通常表示在JavaScript文件中意外地解析到了HTML标签，这暗示了文件引入或路径设置的问题。 问题根源在于Vue CLI项目的静态资源处理机制。Vue CLI默认不会直接处理static目录下的文件，这些文件不会经过Webpack的编译流程。因此，直接在static目录下放置JS文件，并通过<script>标签引入，然后在Vue组件中使用import语句引入，这种方式是错误的。 import语句是ES Module语法，用于在Webpack等模块打包工具中导入模块。而直接通过<script>标签引入的JS文件，并不符合ES Module规范，因此导致了错误。

正确的做法是将静态资源文件（例如test.js）放置在public目录下，这样Vue CLI会直接将它们复制到输出目录，而不会进行任何处理。 或者，将文件放在src目录下，Vue CLI会将其作为模块进行处理，然后在需要的地方使用import语句导入。 如果希望将静态资源放置在src目录下的static文件夹，则需要在vue.config.js文件中配置assetsDir选项为'static'，使得webpack能够正确识别和处理这些文件。

总而言之，解决此问题需要正确配置静态资源路径并根据文件位置选择合适的引入方式。 将JS文件放置在public目录下，并通过<script>标签引入，或者将JS文件放置在src目录下，并使用import语句引入，都是可行的方案。 如果选择将文件放置在src/static目录下，需要配置vue.config.js。

以上就是Vue CLI项目中：如何正确引入本地JS文件并使用全局变量？的详细内容，更多请关注php中文网其它相关文章！