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

问题分析:

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

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

解决方法:

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

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

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

3. 在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文件。

以上就是Vue CLI项目中引入本地JS文件报错Unexpected token '的详细内容，更多请关注php中文网其它相关文章！