去掉这句话，页面就成了这样，原因不深究，自己百度
>加入vue实例
跳过官网说的built-server-bundle.js应用，意思就是不用管这个文件了，只是一个过渡文件，项目中也不会用到。直接使用createBundleRenderer方法，直接用vue-ssr-server-bundle.json；
看下现在的目录结构：
新增了5个文件；有关客户端的配置entry-client.js不是必须的，这里先不管；
app.js是用来创建vue实例的；
entry-server.js是用来创建生成vue-ssr-server-bundle.json（需要用到app.js）所需的配置配件；是给webpack.server.config.js用的；
webpack.server.config.js是用来生成vue-ssr-server-bundle.json的；
vue-ssr-server-bundle.json是给server.js中的createBundleRenderer用的。
//app.js
import Vue from 'vue'
import Vue from './App.vue'//这里一定要写上.vue,不然会匹配到app.js,require不区分大小写0.0
export default createApp=function(){
return new Vue({
render:h => h(App)
})
}
一个createApp生成一个vue实例；
//App.vue
<template>
<div id='app'>
这是个app
</div>
</template>
<script>
export default {}
</script>还没用到<router-view>
//weback-base.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {
output:{
path:path.resolve(__dirname,'./dist'),
filename:'build.js',
},
module: {
rules: [
{
test:/.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] }
},
exclude:[/node_modules/,/assets/] },
{
test:/.vue$/,
use:['vue-loader'] }
]},
resolve: {
alias:{
'@':path.resolve(__dirname,'../')
},
extensions:['.js','.vue','.json']},
plugins:[
new VueLoaderPlugin()
]}
有关webpack配置不啰嗦
//webpack.server.config.js用来生成vue-ssr-server-bundle.json
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')module.exports = merge(baseConfig, {
entry: './entry-server.js',
// 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import)，
