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

Posted 2023-03-14

【中文标题】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标签的末尾。脚本标记也应如下所示： <script src=" asset('js/app.js') "></script>

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

【讨论】：

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