Laravel集成Vue实现桌面通知报错Uncaught ReferenceError: Vue is not defined

问题修复步骤 #

1. 修改 resources/js/app.js 代码 #

你当前的app.js中没有引入Vue就直接调用了Vue.component，同时缺少Vue实例挂载逻辑，修改后代码如下：

require('./bootstrap');
// 引入本地安装的Vue 2.6.12
import Vue from 'vue'
// 挂载到window对象，确保全局可调用
window.Vue = Vue
// 注册组件，添加.default适配es模块导出规则
Vue.component('home', require('./components/Home.vue').default);
// 挂载Vue实例到页面的#app节点
new Vue({
    el: '#app'
})

2. 删除blade模板中冗余的低版本Vue引入 #

打开resources/views/welcome.blade.php，删掉下面这行外部CDN的Vue引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>

你已经在项目依赖中安装了Vue 2.6.12，会随app.js打包引入，额外引入的1.0版本不仅没用还会造成版本冲突。

3. 重新编译前端资源 #

执行以下命令重新编译代码：

npm run dev

编译完成后刷新页面即可解决Vue is not defined的报错。

如果执行npm run dev时报依赖缺失的错误，先执行npm install安装全所有依赖后再重新编译即可。

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