Vue CLI项目中引入本地JS文件导致“Unexpected token '
在Vue CLI项目中，引入本地JS文件以定义全局变量或函数并在Vue组件中使用，是常见需求。然而，不当的引入方式可能导致“Unexpected token '
问题描述：
假设一个名为test2.js的文件，定义了全局变量abc_test和函数a1，并放置在static/js目录下，通过标签引入到index.html。在test2.vue组件中尝试使用abc_test，编译后报错“Uncaught SyntaxError: Unexpected token '
立即学习“前端免费学习笔记（深入）”；
问题分析及解决方案：
错误原因在于直接在index.html中使用标签引入test2.js，这绕过了Vue CLI的Webpack构建流程。Webpack处理静态资源时，这种直接引入的方式可能导致冲突。
解决方案：
-
将JS文件放置在
public目录下： Vue CLI会直接复制public目录下的文件到最终构建输出，无需Webpack处理，避免冲突。例如，将test2.js移动到public/js目录。 -
使用
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(); } }; -
(高级方案) 在
vue.config.js中配置： 如果坚持将静态资源放在src目录下并由Webpack处理，则需要在vue.config.js中配置publicPath或assetsDir来指定静态资源的输出路径。 这需要更深入的Webpack配置知识。 但对于本例中的错误，将文件放在public目录是更简便的解决方法。
通过以上方法，可以正确引入本地JS文件并避免“Unexpected token '
