Laravel中使用Vue组件报错“Unknown custom element”求助

1. 修复Laravel Mix编译配置（核心问题） #

你复制的app.js并非当前项目编译生成，必然存在不匹配问题。首先检查项目根目录的webpack.mix.js，确保配置正确：

• 若使用Vue 2：

  const mix = require('laravel-mix');
  require('laravel-mix-vue2'); // 需先安装该插件
  
  mix.js('resources/js/app.js', 'public/js')
     .vue();
  

  执行命令安装Vue 2适配插件：

  npm install laravel-mix-vue2 --save-dev
  

• 若使用Vue 3：

  const mix = require('laravel-mix');
  
  mix.js('resources/js/app.js', 'public/js')
     .vue();
  

2. 重新执行正确构建流程 #

npm install仅安装依赖，不会生成app.js，编译生成文件需执行以下步骤：

1. 删除旧依赖及锁文件，避免冲突：

   rm -rf node_modules package-lock.json
   npm install
   

2. 执行编译命令生成public/js/app.js：

   npm run dev
   

   若编译报错，根据终端提示修复（如依赖缺失、语法错误），成功后public/js目录会生成app.js及map文件。

3. 修正Blade模板的JS引用路径 #

直接写src="js/app.js"可能因路径配置问题导致文件加载失败，改用Laravel内置助手：

<script src="{{ asset('js/app.js') }}"></script>
<!-- 或用mix助手自动处理缓存哈希 -->
<script src="{{ mix('js/app.js') }}"></script>

4. 确认Vue版本与代码匹配 #

你的app.js代码是Vue 2写法，检查当前安装的Vue版本：

npm list vue

若显示Vue 3，需降级到Vue 2：

npm uninstall vue
npm install vue@2 --save

5. 其他排查点 #

• 打开浏览器控制台，检查是否有app.js加载失败（404）、Vue未加载等报错，优先解决这些前置问题。
• 确认页面中#app元素唯一存在，无重复id。
• 硬刷新浏览器（Ctrl+F5）清除缓存，避免加载旧文件。

内容的提问来源于stack exchange，提问作者blooblabb