const clientManifest = require('../dist/vue-ssr-client-manifest.json')
//服务端渲染清单
const bundle = require('../dist/vue-ssr-server-bundle.json')
//读取模板
const template = fs.readFileSync(templatePath, 'utf-8')
const renderer = createBundleRenderer(bundle,{
template,
clientManifest,
runInNewContext: false
})
//代理相关
proxy(app);
//请求静态资源相关配置
app.use('/js', express.static(resolve(__dirname, '../dist/js')))
app.use('/css', express.static(resolve(__dirname, '../dist/css')))
app.use('/font', express.static(resolve(__dirname, '../dist/font')))
app.use('/img', express.static(resolve(__dirname, '../dist/img')))
app.use('*.ico', express.static(resolve(__dirname, '../dist')))
//路由请求
app.get('*', (req, res) => {
res.setHeader("Content-Type", "text/html")
//传入路由 src/entry/server.js会接收到 使用vueRouter实例进行push
const context = {
url: req.url
}
renderer.renderToString(context, (err, html) => {
if (err) {
if (err.url) {
res.redirect(err.url)
} else {
res.status(500).end('500 | 服务器错误');
console.error(`${req.url}: 渲染错误 `);
console.error(err.stack)
}
}
res.status(context.HTTPStatus || 200)
res.send(html)
})
})
module.exports = app;
//proxy.js
const proxy = require('http-proxy-middleware');
function proxyConfig(obj){
return {
target:'localhost:8081',
changeOrigin:true,
...obj
}
}
module.exports = (app) => {
//代理开发环境
if (process.env.NODE_ENV !== 'production') {
app.use('/js/main*', proxy(proxyConfig()));
app.use('/*hot-update*',proxy(proxyConfig()));
app.use('/sockjs-node',proxy(proxyConfig({ws:true})));
}
}
//index.js
const app = require('./server')
app.listen(8080, () => {
console.log(' 33[42;37m DONE 33[40;33m localhost:8080 服务已启动 33[0m')
})
做完这一步之后，就可以预览基本的服务渲染了。
后面就只差开发环境的配置，以及到node数据的传递(vuex)
npm run build
npm run start:server
打开localhost:8080
F12 - Network - Doc 就可以看到内容
最终目录结构
|-- vuessr
|-- .gitignore
|-- babel.config.js
|-- package-lock.json
|-- package.json
|-- README.md
|-- vue.config.js
|-- nodeScript //node 渲染配置
| |-- index.js
| |-- proxy.js
| |-- server.js
|-- public//模板文件
| |-- favicon.ico
| |-- index.html
| |-- index.nodeTempalte.html
