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.vueimport { 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 ‘
以上就是Vue CLI项目中引入本地JS文件报错“Unexpected token ‘的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1562654.html
微信扫一扫 
支付宝扫一扫 
