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

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处理静态资源时，这种直接引入的方式可能导致冲突。

AI-Text-Classifier

OpenAI官方出品，可以区分人工智能书写的文本和人类书写的文本

59

查看详情

解决方案：

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 '<'”错误，确保Vue CLI项目正常运行。 选择方案1和方案2结合使用是推荐的最佳实践。

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