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

Question

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

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

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

我的 blade 模板：

@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 内容在重新加载页面时闪现，但随后变为空白。没有弹出错误，我已经完成了加载过程，没有发现任何错误。也不会抛出任何错误。

Answer 1

blade 文件中的 HTML 被安装后的 App 组件的内容替换，因此出现了简短的外观和随后的白页。将 blade 文件中的标记移动到您的 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

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

Vue Apollo instance option issues, can't configure properly

vue.js

apollo-client