Vue CLI项目中引入本地JS文件报错Unexpected token '

学习文章要努力，但是不要急！今天的这篇文章《Vue CLI项目中引入本地JS文件报错Unexpected token '》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

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中使用标签引入test.js（实际应为test2.js），并在app.vue组件中使用import语句引入（实际也应为test2.js，且路径错误）。

问题分析:

该错误主要源于以下两点：

1. 错误的引入路径: index.html和app.vue中的JS文件路径不正确。
2. 不兼容的模块化方式: Vue CLI项目使用Webpack打包，而直接通过标签引入的JS文件，其内容会被浏览器直接解析。如果该文件包含非标准的JavaScript语法（例如，在非模块环境中定义全局变量的方式），就会导致解析错误。import语句则适用于模块化的JS文件，而test2.js并非以模块方式编写。

解决方法:

1. 正确放置静态资源: 将test2.js文件放置在public目录下，例如public/static/js/test2.js。public目录下的文件不会被Webpack处理，可以直接被浏览器访问。

2. 正确引入静态资源: 在index.html中，使用标签正确引入test2.js：

<script src="/static/js/test2.js"></script>

3. 在Vue组件中直接使用全局变量: 由于test2.js中的全局变量在浏览器环境中已经定义，因此无需在Vue组件中使用import语句引入。直接在app.vue或其他组件中使用abc_test即可：

<template><div>
    <button>Click me</button>
  </div>
</template><script>
export default {
  methods: {
  }
};
</script>

通过以上步骤，即可解决Unexpected token '错误，并正确在Vue CLI项目中使用本地JS文件中的全局变量。 记住，public目录是关键，它保证了文件不被Webpack处理，直接在浏览器环境中生效。 避免在Vue组件中使用import来引入这些全局变量的JS文件。

好了，本文到此结束，带大家了解了《Vue CLI项目中引入本地JS文件报错Unexpected token '》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！