vue渲染html失败,Vue ssr失败,渲染的html为undefined

想试着写一个ssr demo,不带路由,不带数据预取的。官网文档中的基本用法demo的照写了运行没问题,但当我想换成组件式开发的时候就出问题了,渲染出来的页面是空的,这是我的代码,麻烦帮忙看看

这是entry-client.js

import { createApp } from './app'

const { app } = createApp()

app.$mount('#app')

这是entry-server.js

import { createApp } from './app'

export default context => {

const { app } = createApp()

return app

}

这是app.js

import Vue from 'vue'

import App from '../../component/test/App.vue'

export function createApp () {

const app = new Vue({

render: h => h(App)

})

return { app }

}

这是server.js

const 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,但是渲染失败,页面是空白的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值