想試著寫一個(gè)ssr demo,不帶路由,不帶數(shù)據(jù)預(yù)取的。官網(wǎng)文檔中的基本用法demo的照寫了運(yùn)行沒問題,但當(dāng)我想換成組件式開發(fā)的時(shí)候就出問題了,渲染出來的頁面是空的,這是我的代碼,麻煩幫忙看看這是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打包服務(wù)端的代碼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() ]})我的運(yùn)行步驟是,先 webpack --config webpack.ssr.js,會(huì)成功打包出vue-ssr-server-bundle.json文件,之后node server.js,但是渲染失敗,頁面是空白的。
Vue ssr失敗,渲染的html為undefined
九州編程
2019-03-11 16:14:28