Question

我只有在尝试推送到Heroku时才会出现渲染应用程序的问题。在本地运行时，一切运行良好。

我有一个webpack cli vue设置。这是我的 package.json 文件的片段：

 "scripts": {
    "build": "node build/build.js",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "node server.js",
    "heroku-postbuild": "npm install --no-shrinkwrap && npm run build",
  },

我从online tutorial

获得的heroku-postbuild命令

我认为我的主要问题出在我的 server.js 文件中，该文件位于根文件夹中：

const cors = require('cors')
const express = require('express')
const graphqlHTTP = require('express-graphql')
const schema = require('./server/schema.js')
const serveStatic = require('serve-static');

const app = express()
app.use(cors())
app.use('/graphql', graphqlHTTP({
    schema: schema,
    graphiql: (process.env.NODE_ENV === 'development')
}))

if (process.env.NODE_ENV === 'production') {
    // app.use(serveStatic(__dirname + "/dist"));
    app.get('*', (req, res) => {
        res.sendFile(path.join(__dirname, 'dist/index.html'));
    })
}

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log('GraphQL API server running at localhost:'+ port);
})

最后，在我的vuejs main.js 文件中，我必须定义我的graphql uri。我怎么知道要使用哪个端口号，因为它在部署后是动态的？

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 './App'
import router from './router'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

require('./main.css')

Vue.config.productionTip = false
Vue.use(BootstrapVue)

const httpLink = new HttpLink({
    uri: (process.env.NODE_ENV === 'development' ? 'http://localhost:3000/graphql' : 'https://localhost:5667/graphql')
})

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

Vue.use(VueApollo)

const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
        $loadingKey: 'loading'
    }
})

/* eslint-disable no-new */
new Vue({
    el: '#app',
    apolloProvider,
    router,
    components: { App },
    template: '<App/>'
})

我一直在尝试许多不同的配置，似乎无法超越这个。我搜索了很多帖子和教程但没有成功

Answer 1

如果您的端口是为GraphQL服务器而不是您的http服务器动态设置的，那么您可以使用的解决方案是在服务器上添加路由以获取GraphQL的端口并将其返回给客户端。然后，您将启动HTTPLink对象并使用从服务器返回的端口。

无法在Heroku上呈现Vue，Graphql应用程序

1 个答案: