I want to try to write a ssr demo, without routing and data prefetching. The basic usage of demo in the official website document is no problem, but there is a problem when I want to switch to component development. The rendered page is empty. This is my code. Please take a look at
.this is entry-client.js
import { createApp } from "./app"
const { app } = createApp()
app.$mount("-sharpapp")this is entry-server.js
import { createApp } from "./app"
export default context => {
const { app } = createApp()
return app
}this is 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 }
}this is 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)this is the code of the webpack packaging server
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()
]
})my run step is that first webpack-config webpack.ssr.js, will successfully package the vue-ssr-server-bundle.json file, and then node server.js, will fail to render, and the page is blank.