Laravel Mix编译Vue成功后页面空白，控制台报错求助

问题背景 #

环境：Laravel 10、Node 16、Laravel-mix 6.0.49
原问题：运行npm run dev/npm run production时Vue文件报加载器未定义编译错误，添加.vue()到webpack.mix.js（配置：mix.js('resources/js/app.js', 'public/js').vue();）后编译成功，但页面空白，控制台出现报错。

排查与解决步骤 #

1. 确认Vue实例正确挂载 #

• 检查resources/js/app.js中的实例创建代码，Vue 3需使用createApp方式：

  import { createApp } from 'vue';
  import App from './components/App.vue';
  
  // 确保挂载节点在Blade模板中存在
  createApp(App).mount('#app');
  

• 对应Blade模板必须包含挂载节点：

  <div id="app"></div>
  <script src="{{ mix('js/app.js') }}"></script>
  

2. 安装匹配版本的Vue依赖 #

Laravel Mix 6默认适配Vue 3，需确保依赖安装正确：

npm install vue@^3 @vue/compiler-sfc --save-dev

若使用Vue 2，需修改Mix配置并安装对应依赖：

// webpack.mix.js
mix.js('resources/js/app.js', 'public/js').vue({ version: 2 });

npm install vue@^2 vue-template-compiler --save-dev

3. 清理缓存并重新编译 #

缓存问题可能导致资源加载异常：

# 删除依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清除Mix缓存
npm run clean
# 重新编译
npm run dev

4. 检查组件导入与注册 #

• 确保组件路径正确，避免相对路径错误（比如./components/MyComponent.vue而非components/MyComponent.vue）
• 局部组件需在父组件中导入并注册：

  // ParentComponent.vue
  import MyComponent from './MyComponent.vue';
  
  export default {
    components: {
      MyComponent
    }
  }
  

5. 根据控制台报错针对性处理 #

• 若报错Vue is not defined：添加webpack别名配置指定Vue入口

  // webpack.mix.js
  mix.js('resources/js/app.js', 'public/js')
     .vue()
     .webpackConfig({
       resolve: {
         alias: {
           'vue$': 'vue/dist/vue.esm-bundler.js'
         }
       }
     });
  

• 若报错组件渲染异常：检查组件的template、script语法（比如闭合标签、变量定义错误）

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