使用 Mix 在 Laravel 中未检测到 VueJs

Question

我正在尝试使用 laravel 5.7 设置 VueJs 并进行混合，但它只是说未检测到 VueJs。我有运行 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 不能工作。任何帮助将不胜感激。谢谢！

Answer 1

您需要在 index.blade.php

中添加此脚本

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

Answer 2

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

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

例如

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

Answer 3

谢谢，这很神奇

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

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

使用 Mix 在 Laravel 中未检测到 VueJs

VueJs not detected in Laravel using Mix

javascript

laravel

vue.js

laravel-mix

laravel-5.7