极客观点
项目管理
HarmonyOS
我正在使用 Laravel 5.6。 这个页面 对我不起作用。
Pizza/index.blade.php 看起来像这样：
@extends('layouts.app')
@section('content')
<!-- Styles -->
<link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/components/pizza.js')}}"></script>
<div class="container">
<div class="row justify-content-center">
<div class="card">
<div class="card-header">Pizza</div>
<div class="card-body">
<form action="/pizzas" method="post">
@if ($errors->any())
<div class="alert alert-danger" role="alert">
Please fix the following errors
</div>
@endif
@include('pizza.table')
</form>
</div>
</div>
</div>
</div>
@endsection
比萨/table.blade.php：
<div class="pizza-selection">
<b>Thanks god its pizza day! Select your pizza of the day!</b>
<table id="pizzas" class="md-box">
<tr>
...
</tr>
@foreach ($pizzas as $pizza)
...
@endforeach
<tr>
...
<input type="button" class="md-box btn btn-default"
id="add_new_pizza" onClick="addPizza()" value="Add Pizza!">
</td>
</tr>
</table>
...
单击“add_new_pizza”按钮时出现参考错误，onClick=“addPizza()“，未定义 addPizza()。但是，我尝试在 index.blade.php 中导入 Pizza.js
<script src="{{ asset('js/components/pizza.js')}}"></script>
打印出asset(‘js/components/pizza.js’) 返回 http://localhost:8080/js/components/pizza.js ，这对我来说很合适。
public/js/components/pizza.js 如下所示：
import PizzaService from '../services/PizzaService.js';
async function addPizza(){
// some functionality
}
当我在 .blade.php 的脚本中使用 addPizza() 函数时，它也有效。
此外，如果您需要任何进一步的代码审查，请在 GitHub 上找到存储库： https ://github.com/andrelandgraf/laravel-docker
编辑：当我在 <script><script> 中复制 Pizza.js 时，它工作正常，但我收到 SyntaxError: import declarations may only appear at top level of a module 。当我通过 src 导入脚本时，此 SyntaxError 消失，就像您在我的代码示例中看到的那样。对我来说，这表明脚本根本没有加载。
EDIT2 & 解决方案：我使用了@kerbholz 解决方案。 I added @stack('scripts') to the bottom of the body in app.blade.php and inside @section('content') of index.blade.php I know @push('stack') pizza.js 文件。
我现在更进一步，但我仍然收到 EDIT 中所述的 SyntaxError。是否有解决方法，还是我只需要删除 PizzaService.js 的导入并为此文件添加 <scipt>-Tag ？
EDIT3：好的，这个问题不相关。看起来浏览器还不支持 ES6 模块。
原文由 Andre 发布，翻译遵循 CC BY-SA 4.0 许可协议
您的
@section块之外的任何内容都不会被渲染。您可以编辑您的
layouts/app.blade.php并添加一个@stack('head')您希望您的样式/javascript出现的位置（最好在您的 HTML 的<head>部分中）。然后在
@extends('layouts.app')的任何刀片文件中，您可以使用将内容推送到该堆栈中。
欲了解更多信息，请访问 https://laravel.com/docs/5.6/blade#stacks