【发布时间】：2026-01-22 05:05:03
【问题描述】：
我已按照此链接中提到的步骤在 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 我做了同样的事情。你可以在我的问题中看到我添加了刀片文件
标签： laravel vue.js laravel-7 pusher pusher-js