Laravel升级后Vue报错：Uncaught TypeError: Vue is not a constructor

这个错误大多是因为Laravel Mix 6默认适配Vue 3，再加上模块引入方式冲突导致的，咱们一步步来解决：

1. 明确指定Laravel Mix使用Vue 2版本 #

Laravel Mix 6的.vue()方法默认会启用Vue 3的编译配置，但你当前用的是Vue 2，所以必须在webpack.mix.js里明确指定版本：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({ version: 2 }) // 关键：指定使用Vue 2编译规则
    .sass('resources/sass/app.scss', 'public/css');

2. 统一Vue的引入方式，消除冲突 #

你的app.js里同时混用了require和import两种Vue引入方式，这会导致模块加载异常。把这两行：

window.Vue = require("vue");
import Vue from 'vue';

改成统一的ES模块引入写法：

import Vue from 'vue';
window.Vue = Vue; // 将Vue挂载到window对象，方便在blade模板中直接调用

3. （可选）统一组件注册的ES模块规范写法 #

虽然原来的require注册组件方式在Vue 2下可以运行，但换成import写法更符合Mix 6的模块规范，能减少潜在问题：
比如把：

Vue.component("UploadForm", require(".//components/UploadForm.vue"));

改成：

import UploadForm from './components/UploadForm.vue';
Vue.component('UploadForm', UploadForm);

（注意路径里的多余斜杠可以去掉，.//简化为./即可）

4. 确保app.js在Vue实例创建前加载 #

检查你的blade模板（或布局模板），确保编译后的app.js是在home.blade.php里创建Vue实例的代码之前加载的。比如在布局文件的底部添加：

<script src="{{ asset('js/app.js') }}"></script>

如果你的@section('scripts')是在app.js之后渲染的就没问题；如果顺序颠倒，会导致Vue还未加载就尝试创建实例。

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

最后执行以下命令清理各类缓存，确保所有修改生效：

# 清理Laravel Mix缓存
npm run clean
# 重新编译前端资源
npm run dev
# 清理Laravel视图缓存
php artisan view:clear

完成这些步骤后，页面应该能正常初始化Vue实例了。

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