Laravel 和 Vue：将 js/app.js 放在哪里？答案

【问题标题】：Laravel and Vue: where to put js/app.js?Laravel 和 Vue：将 js/app.js 放在哪里？
【发布时间】：2018-09-22 07:29:54
【问题描述】：

我使用一些 Vue 组件和一个 Bootstrap 组件（轮播）创建了一个简单的应用程序。

我使用 Laravel Mix 编译我的资产。当我将编译好的 app.js 放在 head 标签之间时，我的 Vue 组件不起作用（Cannot find element: #app）。当我将 app.js 放在 </body> 标记之前时，我的轮播（indicators）不起作用......我也尝试了 defer 属性，但没有成功。我是否必须拆分我的 JavaScript 文件才能使两者都工作？

编辑：

当我将资产放在 </body> 标记之前时，轮播的指示器如下所示：<="" li="">

【问题讨论】：

标签： javascript twitter-bootstrap vuejs2 bootstrap-4 laravel-5.5

【解决方案1】：

一般来说，在</body>标签结束之前。

<script type="text/javascript" src="/js/app.js"></script>

如果你还有其他bootstrap特定的js代码，你必须在上面提到的script标签后面写，因为app.js还负责在resources/assets/js/bootstrap.js文件中加载bootstrap所需的js文件。

【讨论】：

我不是在写其他的js代码，只是让轮播工作需要的html。但显然 bootstrap.js 必须在 html 之前运行 .. 因为当我将编译后的 app.js 放在标题中时，我的轮播工作......
但是如果编译出来的app.js包含jquery库呢？现在我不能在页面顶部写任何 jquery，因为使用 Vue 需要我在结束 /body 标记之前将 app.js 放在底部。我真的看不到在同一个 app.js 文件中编译 Vue 和 Jquery 的任何方法因为这两个需要放在html中的不同位置
如何在另一个 js 文件中访问 app.js 上定义的变量？

【解决方案2】：

消息Cannot find element: #app 并不意味着vue 不起作用。这意味着，Vue.js 已正确安装，但找不到任何 id 为 app 的 div：

<div id="app"></div>

要包含一个 js 文件，我建议使用 asset() 助手：

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>

【讨论】：

当我将资产文件放在结束