我只有在尝试推送到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",
},
获得的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/>'
})
我一直在尝试许多不同的配置,似乎无法超越这个。我搜索了很多帖子和教程但没有成功
答案 0 :(得分:0)
如果您的端口是为GraphQL服务器而不是您的http服务器动态设置的,那么您可以使用的解决方案是在服务器上添加路由以获取GraphQL的端口并将其返回给客户端。然后,您将启动HTTPLink对象并使用从服务器返回的端口。