Laravel-Mix升级至v6后app.js与bootstrap.js中Vue不可用的问题求助

我来帮你拆解这个问题，核心是Laravel Mix从v1到v6的打包逻辑变化导致的，咱们一步步来解决：

问题根源 #

在Mix v1时期，你大概率是通过全局脚本引入Vue的，这时候Vue会自动挂载到浏览器的window对象上，所以组件注册代码能直接调用全局的Vue变量。

但Mix v6默认采用了ES模块规范，直接导入Vue后，它不会自动挂载到全局window上——这就是你一开始遇到Vue is not defined的原因。而后来导入Vue后组件注册失效，是因为两个细节没处理对：一是没有用当前导入的Vue实例去注册组件，二是单文件组件的导出需要取default属性。

具体解决方案 #

1. 搞定Vue的全局访问（可选，兼容原有写法） #

如果你还想保持和v1一样的全局Vue使用方式，在bootstrap.js里做如下修改：

// bootstrap.js
import Vue from 'vue';
// 将Vue挂载到window对象，让全局代码都能直接访问Vue变量
window.Vue = Vue;

这样app.js里就不用重复导入Vue，和你原来的代码习惯完全兼容。

2. 修复组件注册的核心代码 #

不管你是否全局挂载Vue，都要调整这部分代码——因为单文件组件在ES模块中是默认导出的：

// app.js
// 如果没在bootstrap.js全局挂载Vue，就需要在这里导入：
// import Vue from 'vue';

const files = require.context('./', true, /\.vue$/i);
// 用forEach替代map，我们只是执行注册操作，不需要返回数组
files.keys().forEach(key => {
  // 提取组件名称，比如 "./components/Hello.vue" → "Hello"
  const componentName = key.split('/').pop().split('.')[0];
  // 关键：必须取.default才能拿到组件的实际配置选项
  Vue.component(componentName, files(key).default);
});

这里的.default是核心——require.context加载的模块对象中，默认导出的组件内容都存在default属性里，之前没加这个，相当于把模块对象传给了Vue.component，自然无法完成注册。

3. 调整Mix的Vue配置 #

Mix v6需要你明确指定Vue版本（如果是Vue 2.x的话），在webpack.mix.js里修改：

// webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
  .vue({ version: 2 }); // 显式声明Vue版本为2.x，Mix v6默认可能无法自动检测

之前添加的resolve.alias其实没必要，Mix已经默认处理了Vue的别名，直接删掉即可。

4. 检查依赖版本匹配 #

确认你的package.json中，Vue 2.x对应的vue-template-compiler已安装，且laravel-mix确实是v6版本，避免依赖版本冲突导致的异常。

最后验证 #

完成以上修改后，运行npm run dev重新编译代码，打开浏览器控制台查看错误是否消失，再测试组件能否正常渲染即可~

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