Laravel Blade.php 使用混合编译的 JavaScript 到 app.js

Posted

技术标签:

【中文标题】Laravel Blade.php 使用混合编译的 JavaScript 到 app.js【英文标题】:Laravel blade.php use JavaScript compiled by mix to app.js 【发布时间】:2017-09-08 18:30:57 【问题描述】:

我想在我的 Blade.php 文件中使用 javascript 函数。我用一个非常简单的函数创建了 xyz.js 文件

function picture(soemthing)
    document.getElementById('idXYZ').src = "example.com";

然后我将此文件添加到 webpack.mix.js 配置中:

mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

然后运行:npm run dev。到目前为止一切顺利,npm 编译了我的脚本,并且 picture 函数包含在 app.js 文件中。现在我想在blade.php 中添加一个表单并在点击时调用picture 函数。我创建了以下 Blade.php 文件:

@extends('layouts.app')
@section('content')
<div class="container">
    <form>
        Enter url: <input type="text" id="someID">
        <input type="button" onclick="picture($('#someID').val())" value="Click"/>
    </form>
</div>
<script src=" mix('js/app.js') "></script>
@endsection

在这里我真的迷路了(顺便说一句:我一直是后端的人)。在页面重新加载浏览器显示

[Vue 警告]:编译模板时出错:模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签,例如 ,因为它们不会被解析。

当我点击按钮时,我有

错误 new:76 Uncaught ReferenceError: xyz is not defined

我了解第一个错误表明 app.js 文件未加载,这就是找不到 图片 的原因。我应该如何包含 app.js 或任何其他由混合 JavaScript 文件编译的文件?真的是导致这个问题的标签吗?

【问题讨论】:

【参考方案1】:

我认为您收到错误是因为您在 vue.js 应用程序 div 中放置了一个新的脚本标签。

如果您打开布局文件app.blade.php,则有一个带有id="app" 的div,在其中您将获得内容部分。副作用意味着您不应该在 Vue.js 模板中加载新脚本。

脚本应该在你的布局中body标签的末尾。脚本标记也应如下所示: &lt;script src=" asset('js/app.js') "&gt;&lt;/script&gt;

那么您的脚本应该可用。但我会看看 Vue.js 以及你如何处理那里的点击事件。 click handler docs

【讨论】:

我有你在 app.blade.php 文件中提到的确切的

以上是关于Laravel Blade.php 使用混合编译的 JavaScript 到 app.js的主要内容,如果未能解决你的问题,请参考以下文章

请教laravel view 怎么显示 controller 中传递的对象值

使用 Laravel 8(和 Jetstream)将自定义数据传递到 login.blade.php

无法使用 Laravel (blade.php) 加载具有较长链接的样式

混合清单不存在

如何在 laravel 4 的 Blade.php 模板中使用静态函数?

Laravel Blade html 图片