怎么搭建ssr服务器 ssr一键搭建脚本最新

怎么搭建ssr服务器

IT电脑小知识篇，关于怎么搭建ssr服务器和ssr一键搭建脚本最新的IT知识，一起来看看吧！

看了vue 官方的文档，还是有点懵的。百度了一堆东西，终于成功的配置出基于vue-cli3的vue-ssr 服务端预渲染。 有帮助的话，还请点个赞 建议使用nuxt，可以更好的做服务端渲染。

需要自己创建index.template.html文件。这个文件在

文章转载：乐字节

一、创建vue项目

$ vue create vue-ssr 创建目录名为vue-ssr的项目
选择项目需要的选项，直接创建即可。

$ cd vue-ssr 创建完成后，进入项目目录。

二、改造vue-ssr

1、安装环境

$ npm install vue-server-renderer lodash.merge webpack-node-externals cross-env express --registry=https://registry.npm.taobao.org --save-dev

2、创建ssr配置文件

在根目录新建 server.js 文件，用于集成node服务

// server.jsconst express = require('express')const fs = require('fs')const { minify } = require('html-minifier')const path = require('path') const { createBundleRenderer } = require('vue-server-renderer')const app = express() const resolve = file => path.resolve(__dirname, file) const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), { runInNewContext: false, template: fs.readFileSync(resolve('./index.template.html'), 'utf-8'), clientManifest: require('./dist/vue-ssr-client-manifest.json'), basedir: resolve('./dist')})app.use(express.static(path.join(__dirname, 'dist')))app.get('*', (req, res) => { res.setHeader('Content-Type', 'text/html') const handleError = err => { if (err.url) { res.redirect(err.url) } else if (err.code === 404) { res.status(404).send('404 | Page Not Found') } else { res.status(500).send('500 | Internal Server Error') console.error(`error during render : ${req.url}`) console.error(err.stack) } } const context = { title: 'document', url: req.url, keywords: '', description: '', } renderer.renderToString(context, (err, html) => { if (err) { return handleError(err) } res.send(minify(html, { collapseWhitespace: true, minifyCSS: true })) })})app.on('error', err => console.log(err))app.listen(8000, () => { console.log(`vue ssr started at http://localhost:8000`)})

在src目录下新建以下两个文件 /src/entry-client.js /src/entry-server.js

1、entry-client.js

// entry-client.jsimport { createApp } from './main'// 客户端特定引导逻辑……const { app } = createApp()// 这里假定 App.vue 模板中根元素具有 `id="app"`app.$mount('#app')

123下一页