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中使用<script></script>标签引入test.js（实际应为test2.js），并在app.vue组件中使用import语句引入（实际也应为test2.js，且路径错误）。
问题分析:
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
该错误主要源于以下两点：
-
错误的引入路径:
index.html和app.vue中的JS文件路径不正确。 -
不兼容的模块化方式: Vue CLI项目使用Webpack打包，而直接通过
<script></script>标签引入的JS文件，其内容会被浏览器直接解析。如果该文件包含非标准的JavaScript语法（例如，在非模块环境中定义全局变量的方式），就会导致解析错误。import语句则适用于模块化的JS文件，而test2.js并非以模块方式编写。
解决方法:
-
正确放置静态资源: 将
test2.js文件放置在public目录下，例如public/static/js/test2.js。public目录下的文件不会被Webpack处理，可以直接被浏览器访问。 -
正确引入静态资源: 在
index.html中，使用<script></script>标签正确引入test2.js：
<script src="/static/js/test2.js"></script>
-
在Vue组件中直接使用全局变量: 由于
test2.js中的全局变量在浏览器环境中已经定义，因此无需在Vue组件中使用import语句引入。直接在app.vue或其他组件中使用abc_test即可：
<template>
<div>
<button @click="abc_test.a1()">Click me</button>
</div>
</template>
<script>
export default {
methods: {
}
};
</script>
通过以上步骤，即可解决Unexpected token '错误，并正确在Vue CLI项目中使用本地JS文件中的全局变量。 记住，public目录是关键，它保证了文件不被Webpack处理，直接在浏览器环境中生效。 避免在Vue组件中使用import来引入这些全局变量的JS文件。
