使用 Mix 在 Laravel 中未检测到 VueJ答案

【问题标题】：VueJs not detected in Laravel using Mix使用 Mix 在 Laravel 中未检测到 VueJ
【发布时间】：2019-03-22 09:01:22
【问题描述】：

我正在尝试使用 laravel 5.7 设置 VueJ 并进行混合，它只是说未检测到 VueJ。我已经运行npm install。这是我的欢迎观点：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">

        <style type="text/css">body { padding-top: 40px; }</style>
    </head>
    <body>
        <div id="root" class="container">
            <message title="Hello World" body="Lorem ipsum dolor sit amet."></message>
    </div>
    </body>
</html>

这是我的应用 js：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('message', require('./components/Message.vue'));

const app = new Vue({
    el: '#root'
});

我不明白为什么 VueJs 不能工作。任何帮助将不胜感激。谢谢！

【问题讨论】：

您的视图中没有任何脚本标签..
啊，好的，谢谢！最简单的事情！

标签： javascript laravel vue.js laravel-mix laravel-5.7

【解决方案1】：

谢谢，这就是魔法

<script src="{{ mix('/js/app.js') }}"></script>

在 laravel 中，我将它放在刀片 HTML 中，然后重新加载页面，F12 并且 vue 选项卡正在工作，现在我可以看到 vue 的标签了。

【讨论】：

【解决方案2】：

如前所述，您错过了脚本标签。

如果您正在编译源代码，您应该使用mix() 而不是asset()，因为它会尊重诸如file versioning 和mix.version() 之类的东西。

例如

<script src="{{ mix('/js/app.js') }}"></script>

【讨论】：

将两者结合起来是一种更好的做法。 mix() 不会附加应用程序的 url。
mix() 确实返回一个相对路径，这在大多数情况下都很好。如果您确实需要预先添加域，您可以使用@Devon 所说的asset(mix(...)) 或secure_asset(mix(...))。

【解决方案3】：

你需要在你的 index.blade.php 中添加这个脚本

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

【讨论】：