Laravel 5.7 - vue 模板不会渲染答案

【问题标题】：Laravel 5.7 - vue template won't renderLaravel 5.7 - vue 模板不会渲染
【发布时间】：2019-02-11 09:53:11
【问题描述】：

我正在尝试使用 Vue 设置 Laravel，但由于某种原因，目前没有渲染任何内容。

这是我的代码：

主布局文件（main.blade.php）

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />

        <title>Pathfinder Character Sheet</title>

        <link href="{{ asset('css/app.css') }}"/ rel="stylesheet">
        <link href="{{ asset('css/light-bootstrap-dashboard.css') }}" rel="stylesheet">

        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet">
        <link rel="stylesheet" href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet">
    </head>
    <body>
        <div id=character-sheet>
            <master></master>
        </div>
        <link rel="js" href="{{ asset('js/app.js') }}">
    </body>
</html>

app.js 文件

import Vue from 'vue'
import Master from './components/layout/Master'

require('./bootstrap');
require('./light-bootstrap-dashboard');

window.Event = new Vue()
window.Vue   = Vue

const app = new Vue({
    el: '#character-sheet',
    components: {
        Master
    },
    template: '<Master/>',
});

Master.vue

<template>
    <div class="wrapper" id="character-sheet">

        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt excepturi, ex exercitationem laborum beatae nostrum molestiae inventore eos amet ut debitis nam accusamus illum ipsa soluta ipsam officiis doloremque rerum.</span>

    </div>
</template>

<script>

export default {
    name: "Master"
}
</script>

我没有收到任何错误，只是一个空白屏幕（已加载 app.js 文件）。我在这里做错了什么？

【问题讨论】：

在dom中两次添加了相同的id。
尝试了id在刀片文件或vue文件中的两种组合，结果仍然相同。
您的开发者控制台中是否有任何错误？
@Jerodev 在 PHP 或 JS 中出现 0 个错误（这是我保存 Master.vue 时收到的消息 - DONE 在 28 毫秒内成功编译）
您的应用 div 中无需添加 <master></master>，您已经在 Vue 实例上的模板中添加了 Master 元素。尝试删除它。

标签： laravel vue.js laravel-5.7

【解决方案1】：

从 Master.vue 中删除 id="character-sheet"

在app.js中使用如下.....

Vue.component('master', require('./components/layout/Master.vue').default);

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

运行命令：npm run dev

【讨论】：

【解决方案2】：

您的 HTML Id 没有被引用。

更改<div id=character-sheet> 致<div id="character-sheet">

【讨论】：

这是完全有效的 html :)

【解决方案3】：

id 必须是唯一的，您将两个具有相同 id 的元素嵌套。尽量不要将组件放在该标签内。

...
<body>
  <master></master>
  <link rel="js" href="{{ asset('js/app.js') }}">
</body>
...

【讨论】：