Laravel

Question

我有一个 Laravel 7 项目并安装了 bootstrap 以及 ui vue auth 包。我正在尝试修改扩展 app.blade.php 的主页 (home.blade.php)，但我发现 app.blade.php 中的 <div id="app"> 不知何故] 正在渲染两次。我在 app.blade.php 的底部放置了一个带有 console.log() 的脚本标签，就在 div 标签关闭之前，它输出了两次。但是，当我将脚本标记放在这个 div 之外时，它会正常运行并且只输出一次。

我发现这是由于 app.blade.php:

头部的脚本标记造成的

<script src="{{ asset('js/app.js') }}" defer></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 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>

编辑：由于几个小时后仍未得到答复，我决定设置一个 repo 以防有人想亲眼看到问题所在。

Answer 1

我发现这是因为在 Vue 组件之外有脚本标签。我删除了 app.blade.php 中的脚本标签，并将安装 vue 时出现的 ExampleComponent 与 laravel 放在了 mounted() 方法中，它有一个 console.log 并且它只被调用一次。

不过，我还是不知道为什么会这样。如果有人能阐明这件事，那就太棒了。也许我会 post 有了这个新见解再问一个问题。

Answer 2

我遇到了同样的问题，在我的情况下，这是由于页面中的某些 iframes 指向 # src url。我意识到它在控制台中多次写入该消息：

[控制台中的 Vue devtools 消息][1]

所以，我创建了一条新的特殊路线 Route::get('/frame', [PagesController::class, 'frame'])->name('frame'); 其中 return 一个空字符串，如

/**
 * Used for iframes to override dowloadinf twice page content
 */
public function frame() {
    return "";
}

它解决了我的问题。也许对于在 "#" 获取的所有资源来说都是一样的 . [1]: https://i.stack.imgur.com/Z55BX.png

Laravel - Vue 组件渲染两次因为 app.js

Laravel - Vue component rendering twice because of app.js

webpack

vue.js

vuejs2

laravel-7