Vue Apollo 实例选项问题，无法正确配置答案

【问题标题】：Vue Apollo instance option issues, can't configure properlyVue Apollo 实例选项问题，无法正确配置
【发布时间】：2019-05-09 16:57:35
【问题描述】：

我现在正致力于将 Vue-Apollo 集成到 Laravel 项目中。我能够让 Vue 正常运行。现在我正在尝试集成 Apollo，但它不起作用。我觉得我错过了一些非常简单但找不到的东西。这是我的App 组件：

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: 'app',
    }
</script>

我的刀片模板：

@extends('layouts.app')

@section('content')
    <div id="app">
        <div class="container">
            <div class="row justify-content-center">
                <App>
                    <h1>Here</h1>
                    <manufacturers-component></manufacturers-component>
                    <product-groups-component></product-groups-component>
                    <products-component></products-component>
                </App>
            </div>
        </div>
    </div>
@endsection

最后，我在其中实例化 Vue 的 JS：

require('./bootstrap');


import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

import App from './components/App'

Vue.component('manufacturers-component', require('./components/ManufacturersComponent.vue'));
Vue.component('product-groups-component', require('./components/ProductGroupsComponent.vue'));
Vue.component('products-component', require('./components/ProductsComponent.vue'));

 const httpLink = new HttpLink({
     uri: 'http://homestead.test/graphql'
 })

 const apolloClient = new ApolloClient({
     link: httpLink,
     cache: new InMemoryCache()
 })

 Vue.use(VueApollo)

 const apolloProvider = new VueApollo({
     defaultClient: apolloClient
 })

 const vue_app = new Vue({
    el: '#app',
    components: { App },
    apolloClient,
    render: h => h(App)
 });

问题是它确实短暂地安装了App 组件，我看到重新加载页面的 h1 内容的闪光，但随后变为空白。没有错误弹出，我已经完成了加载过程，找不到任何突出的错误。也不会抛出任何错误。

【问题讨论】：

标签： vue.js apollo-client

【解决方案1】：

blade 文件中的 HTML 在安装后将被替换为 App 组件的内容，因此会出现简短的外观和随后的白页。将标记从刀片文件移动到您的 App 组件中：

App.vue

<template>
  <div class="container">
     <div class="row justify-content-center">
        <h1>Here</h1>
        <manufacturers-component></manufacturers-component>
        <product-groups-component></product-groups-component>
        <products-component></products-component>
     </div>
  </div>
</template>
<script>
    export default {
        name: 'app',
    }
</script>

index.blade.php

@extends('layouts.app')

@section('content')
    <div id="app"></div>
@endsection

【讨论】：