为啥使用 laravel vue 在桌面通知中出现错误“未捕获的 ReferenceError：Vue 未定义”？
Posted
技术标签:
【中文标题】为啥使用 laravel vue 在桌面通知中出现错误“未捕获的 ReferenceError：Vue 未定义”？【英文标题】：why getting error 'Uncaught ReferenceError: Vue is not defined' in desktop notification using laravel vue?为什么使用 laravel vue 在桌面通知中出现错误“未捕获的 ReferenceError：Vue 未定义”？ 【发布时间】：2021-12-27 05:14:28 【问题描述】：我已按照此链接中提到的步骤在 localhost https://pusher.com/tutorials/desktop-notifications-laravel/ 中进行桌面通知。并在 cli 'npm run dev' 中运行命令。
在实时链接中使用命令“php artisan serve”运行项目后出现错误
app.js
require('./bootstrap');
Vue.component('home', require('./components/Home.vue'));
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]).vue();
bootstrap.js
window._ = require('lodash');
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo(
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: true
);
welcome.blade.php
<!-- ./resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang=" config('app.locale') ">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content=" csrf_token() ">
<title>News Talk</title>
<!-- Styles -->
<link href=" asset('css/app.css') " rel="stylesheet">
<style>
.container
padding-top: 100px;
</style>
<!-- Scripts -->
<script>
window.Laravel = !! json_encode([
'csrfToken' => csrf_token(),
]) !!;
</script>
</head>
<body>
<div id="app">
<!-- home Vue component -->
<home></home>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
<script src=" asset('js/app.js') "></script>
</body>
</html>
当运行命令“npm run dev”时
package.json
"private": true,
"scripts":
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
,
"devDependencies":
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.12"
,
"dependencies":
"laravel-echo": "^1.11.3",
"pusher-js": "^7.0.3",
"vue": "^2.6.12"
请帮我解决这个问题。
【问题讨论】：
我已添加 vue.js 你能把你的bootstrap.js文件代码放上来
@KamleshPaul 添加了问题
@kumarishwetha 首先添加 vue js cdn 脚本，并在刀片文件中添加 app.js 编译的 js 文件
@ApurvBhavsar 我做了同样的事情。你可以在我的问题中看到我添加了刀片文件
【参考方案1】：
你错过了这个window.Vue = require("vue");
app.js
window.Vue = require("vue");
require('./bootstrap');
Vue.component('home', require('./components/Home.vue'));
把这个放在你的package.json
"private": true,
"scripts":
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
,
"devDependencies":
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue-loader": "^15.9.7",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
,
"dependencies":
"laravel-echo": "^1.11.3",
"pusher-js": "^7.0.3",
"vue": "^2.6.12"
然后运行npm run update && npm run dev
【讨论】：
错误：未捕获的类型错误：Vue.component 不是函数 修改后编译你的代码请npm run dev
编译但出错
然后运行npm i vue@2.6.12
Vue 软件包版本不匹配：在“npm run dev”构建中出错 :(【参考方案2】：
-
首先通过运行
rm -rf node_modules/ package-lock.json 删除node_modules 文件夹和包锁定文件。
从 package.json 文件中删除 vue 依赖项 vue、vue-loader 和 vue-template-compiler。
现在运行npm install。
由npm install vue vue-loader file-loader 安装vue 和vue-loader
它将安装 vue 2.6.13 和 vue-loader 15.9.7 和 file-loader 6.2.0 版本包。
安装npm install vue-template-compiler --save
在 app.js 文件中
require('./bootstrap');
import Vue from 'vue';
Vue.component('home', require('./components/Home.vue'));
您不需要在刀片文件中添加 cdn 链接。它将使用 webpack 自动添加
【讨论】：
首先通过运行 rm -rf node_modules/ 删除 node_modules 文件夹。可以直接删除吗？因为我用的是windows 是的，它会起作用的。我正在使用它。 没有。留下空白页 你删除了 node_modules 和 package-lock.json 吗？？以上是关于为啥使用 laravel vue 在桌面通知中出现错误“未捕获的 ReferenceError：Vue 未定义”？的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 推送通知桌面（chrome 或 firefox）
为啥 vue js 组件没有显示在 laravel 刀片中？
为啥 Laravel 中间件 CORS 不能与 Vue.js 一起使用
为啥 Laravel 附带 Vue？ （SPA 与 MVC）