Vue CLI项目中引入本地JS文件导致“Unexpected token '

在Vue CLI项目中，引入本地JS文件以定义全局变量或函数并在Vue组件中使用，是常见需求。然而，不当的引入方式可能导致“Unexpected token '

问题描述：

假设一个名为test2.js的文件，定义了全局变量abc_test和函数a1，并放置在static/js目录下，通过<script></script>标签引入到index.html。在test2.vue组件中尝试使用abc_test，编译后报错“Uncaught SyntaxError: Unexpected token '

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

问题分析及解决方案：

错误原因在于直接在index.html中使用<script></script>标签引入test2.js，这绕过了Vue CLI的Webpack构建流程。Webpack处理静态资源时，这种直接引入的方式可能导致冲突。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

解决方案：

1. 将JS文件放置在public目录下： Vue CLI会直接复制public目录下的文件到最终构建输出，无需Webpack处理，避免冲突。例如，将test2.js移动到public/js目录。

2. 使用import语句导入： 如果需要在Vue组件中使用test2.js中的内容，不能仅依赖于复制到输出目录。 需要使用ES Module规范编写test2.js，并在test2.vue中使用import语句导入。例如：

   // test2.js (需要修改为ES Module规范)
   export const abc_test = {
       a1: function() {
           console.log('a1 function');
       }
   };
   
   // test2.vue
   import { abc_test } from './js/test2.js'; // 路径根据实际情况调整
   
   export default {
       mounted() {
           abc_test.a1();
       }
   };

3. (高级方案) 在vue.config.js中配置： 如果坚持将静态资源放在src目录下并由Webpack处理，则需要在vue.config.js中配置publicPath或assetsDir来指定静态资源的输出路径。 这需要更深入的Webpack配置知识。 但对于本例中的错误，将文件放在public目录是更简便的解决方法。

通过以上方法，可以正确引入本地JS文件并避免“Unexpected token '