为了账号安全,请及时绑定邮箱和手机立即绑定

Vue ssr失败,渲染的html为undefined

Vue ssr失败,渲染的html为undefined

九州编程 2019-03-11 16:14:28
想试着写一个ssr demo,不带路由,不带数据预取的。官网文档中的基本用法demo的照写了运行没问题,但当我想换成组件式开发的时候就出问题了,渲染出来的页面是空的,这是我的代码,麻烦帮忙看看这是entry-client.jsimport { createApp } from './app'const { app } = createApp()app.$mount('#app')这是entry-server.jsimport { createApp } from './app'export default context => {  const { app } = createApp()  return app}这是app.jsimport Vue from 'vue'import App from '../../component/test/App.vue'export function createApp () {  const app = new Vue({    render: h => h(App)  })  return { app }}这是server.jsconst server = require('express')()const { createBundleRenderer } = require('vue-server-renderer')const renderer = createBundleRenderer('./dist/vue-ssr-server-bundle.json', {  runInNewContext: false,   template: require('fs').readFileSync('./views/test/test.html', 'utf-8')})server.get('*', (req, res) => {  renderer.renderToString( (err, html) => {    res.end(html)  })}).listen(8899)这是webpack打包服务端的代码const merge = require('webpack-merge')const nodeExternals = require('webpack-node-externals')const baseConfig = require('./webpack.common.js')const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')module.exports = merge(baseConfig, {  entry: './js/test/entry-server.js',  target: 'node',  devtool: 'source-map',  output: {    libraryTarget: 'commonjs2'  },  externals: nodeExternals({    whitelist: /\.css$/  }),  plugins: [    new VueSSRServerPlugin()  ]})我的运行步骤是,先 webpack --config webpack.ssr.js,会成功打包出vue-ssr-server-bundle.json文件,之后node server.js,但是渲染失败,页面是空白的。
查看完整描述

1 回答

?
哆啦的时光机

TA贡献1779条经验 获得超6个赞

解决了,./dist/vue-ssr-server-bundle.json不能是相对路径,必须绝对路径


查看完整回答
反对 回复 2019-03-24
  • 1 回答
  • 0 关注
  • 530 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号