脚本文件包含在 Laravel 5.3

Question

如何在 Laravel 5.3 中包含 vue.js 和 app.js 等脚本文件？有什么特殊的方法可以包括它们吗？我将它们包括在内。

<script src="http://127.0.0.1/addbook/node_modules/vue/dist/vue.js"></script>
<script src="js/app.js"></script>

Answer 1

你应该使用asset for this or even better elixir and you should rather don't put node_modules into your public directory just copy files you want to use via Laravel elixir

Answer 2

按照其他答案的建议，你应该先通读Laravel elixir的文档，有了它我们可以简单地写5行配置并立即获得流畅的前端开发体验，其中包括webpack 用于资产打包，babel 用于将 ES6 代码转换为 ES5，browser-sync 用于文件监视和多设备同步浏览器自动刷新。

除了长生不老药，这里有一些我遵循的做法：

在您的 layouts/app.blade.php 中包含一个通用 app.js，其中包含您绝对确定要在每个页面中使用的代码。例如我将 $('.datetime').datetimepicker(...) 放入其中，因此 bootstrap 日期时间选择器插件会在我将 .datetime 放入 html 的任何地方为我初始化选择器。
对于您使用 npm 导入的那些库，import 它们在特定视图的 js 文件中，以便 webpack 将使用您包含的库编译您的代码。您可以 Vue = require('vue'); 或 import Vue from 'vue';，node.js 或任何浏览器都不支持后者，但 babel 会为我们转译它。
现在您有一个特定的视图，例如 login.blade.php，其中 @extends app.blade.php 布局。我们还知道最好的做法是将脚本文件放在 html 的 body 的底部，这样它们就不会阻止 dom 解析和资源下载。我个人在 login.blade.php 中使用 Laravel blade 的语法，例如

@push('childJS')
<script src='/js/login.js'></script>
@endpush

并在 app.blade.php 中：

    <script src='/js/app.js'></script>
    @stack('childJS')
</body>

所以 2 个 js 文件都出现在 body 的底部以获得最佳性能，并且 app.js 总是出现在 login.js 之前，以便很好地解决 js 文件之间的依赖关系。

脚本文件包含在 Laravel 5.3

Script file inclusion in Laravel 5.3

javascript

vue.js

laravel-5.3