Vue.js + Laravel5.7 'Hello World' 测试不起作用答案

【问题标题】：Vue.js + Laravel5.7 'Hello World' Test not workVue.js + Laravel5.7 'Hello World' 测试不起作用
【发布时间】：2019-05-01 05:01:30
【问题描述】：

我想渲染 Vue.js 代码但不能在 LARAVEL 5.7 中工作

我的 app.js 代码：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('hello-world-component', require('./components/HelloWorld.vue'));

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

还有新文件 HelloWorld.vue ：

<template>
  <div class="container">
    Hello Laravel + Vue!
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log('Component mounted.')
    }
  }
</script>

还有welcome.blade.php：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel</title>
    </head>
    <body>
        <div class="content">
            <div class="title m-b-md">
                <hello-world-component></hello-world-component>
            </div>
        </div>
    </body>
</html>

当我运行这个命令时，

sudo npm run dev

结果：

DONE  Compiled successfully in 6224ms                                                                   7:16:51 AM
       Asset     Size  Chunks                    Chunk Names
  /js/app.js  1.38 MB       0  [emitted]  [big]  /js/app
/css/app.css   198 kB       0  [emitted]         /js/app

但是当我连接我的索引页面时，没有显示我的 HelloWorld.Vue 代码。

我不知道是什么问题？

【问题讨论】：

标签： laravel vue.js npm

【解决方案1】：

您需要一个 id 为 app 的元素来挂载。例如：

html

<body>
    <div id="app"></div>
</body>
<script src="/js/app.js"></script>

const app = new Vue({
  el: '#app',
  template: '<hello-world-component></hello-world-component>'
});

【讨论】：

【解决方案2】：

您没有在刀片中添加 id app

你也没有包含编译好的脚本文件

更新刀片

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel</title>
    </head>
    <body>
        <div class="content" id="app">
            <div class="title m-b-md">
                <hello-world-component></hello-world-component>
            </div>
        </div>
    </body>
<script src="{{ asset('js/app.js') }}"></script>
</html>

【讨论】：

【解决方案3】：

正如 DigitalDrifter 所写，添加 id="app" 并添加路径到您编译的 js 资产。

类似这样的东西（最好在</body> 标签之前）。

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

控制台中的消息还可以为您提供一些进一步调试的线索。

【讨论】：

【解决方案4】：

将 id="app" 放入您的 div

    <body>
        <div id="app" class="content">
            <div class="title m-b-md">
                <hello-world-component></hello-world-component>
            </div>
        </div>
    </body>

【讨论】：