VueCLI项目中：如何引入本地JS并全局变量设置？

本文针对Vue CLI项目中引入本地JS文件并设置全局变量时出现的“Unexpected token '`标签引入，或放置在`src`目录下并使用`import`语句，并讲解了如何在`vue.config.js`中配置`assetsDir`选项以正确处理`src/static`目录下的文件。 通过选择合适的路径和引入方式，即可避免此错误，顺利在Vue组件中使用全局变量。

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中定义的全局变量：

<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文件，并通过