Laravel-Vue组件由于app.js渲染两次 [英] Laravel - Vue component rendering twice because of app.js
问题描述
我有一个Laravel 7项目并安装了引导程序以及ui vue auth软件包.我正在尝试修改扩展 app.blade.php 的主页(home.blade.php)，但是我发现以某种方式< div id ="app">; 在app.blade.php中呈现两次.我在div标签关闭且输出两次之前，将一个带有 console.log()的脚本标签放在app.blade.php的底部.但是，当我将script标签放置在此div之外时，它的行为应达到预期效果，并且仅输出一次.
我发现这是由于app.blade.php头中的脚本标签引起的:
< script src =" {{asset('js/app.js')}}'"延迟></script>
当我评论该行时，一切正常！因此，我的问题是:为什么这个脚本标签在这里?为什么它会使一切运行两次?我真的需要吗?将来如果没有的话，我会遇到问题吗?
webpack.mix.js:
const mix = require('laravel-mix');mix.js('resources/js/app.js'，'public/js').sass('resources/sass/app.scss'，'public/css'); resources/js/app.js:
require('./bootstrap');window.Vue = require('vue');Vue.component('example-component'，require('./components/ExampleComponent.vue').default);const app = new Vue({el:#app"，}); app.blade.php:
<！doctype html>< html lang ="{{str_replace('_'，'-'，app()-> getLocale())}}">< head>< meta charset ="utf-8">< meta name ="viewport" content ="width = device-width，initial-scale = 1"><！-CSRF令牌-><元名称="csrf-令牌" content ="{{csrf_token()}}">< title> {{config('app.name'，'Laravel')}}}</title><！-脚本->< script src ="{{asset('js/app.js')}}"延迟></script><！-字体->< link rel ="dns-prefetch" href ="//fonts.gstatic.com">< link href ="https://fonts.googleapis.com/css?family=Nunito" rel ="stylesheet"><！-样式->< link href ="{{asset('css/app.css')}}" rel ="stylesheet">< ;!-图标->< script src ="https://kit.fontawesome.com/36a988e261.js" crossorigin ="anonymous"</script></head><身体>< div id ="app">< script type ="application/javascript"> console.log('app')</script></div></body></html> 由于已经几个小时了，没有答案，所以我决定在其中设置 repo 如果有人想亲眼看看问题出在哪里.
我发现这是因为Vue组件外部有脚本标签.我删除了app.blade.php中的script标记，然后将用laravel安装vue时附带的ExampleComponent放到了mount()方法中，该控制台具有console.log，并且只被调用了一次.
不过，我仍然不知道为什么会这样.如果有人可以阐明这个问题，那就太好了.也许我会用这个新见解发布另一个问题.
I have a Laravel 7 project and installed bootstrap as well as the ui vue auth package. I'm trying to modify the home (home.blade.php) which extends app.blade.php but I've found that somehow the <div id="app"> in app.blade.php is rendering twice. I put a script tag with a console.log() at the bottom of app.blade.php just before the div tag closes and it outputs twice. However, when I put the script tag outside this div it behaves as it should and it only outputs once.
I found out that this is due to a script tag in the head of app.blade.php:
<script src="{{ asset('js/app.js') }}" defer></script>
When I commented that line, everything worked fine! So, my questions are: Why is this script tag here? Why does it make everything run twice? Do I really need it? Will I encounter problems in the future by not having it?
webpack.mix.js:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
resources/js/app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
app.blade.php:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Icons -->
<script src="https://kit.fontawesome.com/36a988e261.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
<script type="application/javascript">console.log('app')</script>
</div>
</body>
</html>
Edit: Since it's been a few hours and no answers I decided to set up a repo in case anyone wants to see first-hand what the problem is.
I found out this is because of having script tags outside of a Vue component. I deleted the script tag in app.blade.php and put the ExampleComponent that comes when installing vue with laravel which has a console.log inside the mounted() method and it only gets called once.
Still, I have no idea as to why this happens. If someone could shed light into this matter that would be awesome. Maybe I'll post another question with this new insight.
这篇关于Laravel-Vue组件由于app.js渲染两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
