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或其他名称，文章根据问题内容调整了文件名）：

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

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

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

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

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

编译后运行项目，却出现“Uncaught SyntaxError: Unexpected token '

问题分析与解决：

错误信息“Unexpected token '标签引入，然后在Vue组件中使用import语句引入，这种方式是错误的。 import语句是ES Module语法，用于在Webpack等模块打包工具中导入模块。而直接通过<script>标签引入的JS文件，并不符合ES Module规范，因此导致了错误。</script>

正确的做法是将静态资源文件（例如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。</script>