怎么搭建ssr服务器（ssr一键搭建脚本最新） | 滔搏网-j9九游会老哥交流必备社区

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

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

文章转载：乐字节

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

$ cd 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.js
const 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.js
import { createapp } from './main'
// 客户端特定引导逻辑……
const { app } = createapp()
// 这里假定 app.vue 模板中根元素具有 `id="app"`
app.$mount('#app')

2、entry-server.js

// entry-server.js
import { createapp } from "./main";
export default context => {
    // 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 promise，
    // 以便服务器能够等待所有的内容在渲染前，
    // 就已经准备就绪。
    return new promise((resolve, reject) => {
        const { app, router } = createapp();
        // 设置服务器端 router 的位置
        router.push(context.url);
        // 等到 router 将可能的异步组件和钩子函数解析完
        router.onready(() => {
            const matchedcomponents = router.getmatchedcomponents();
            // 匹配不到的路由，执行 reject 函数，并返回 404
            if (!matchedcomponents.length) {
                return reject({
                    code: 404
                });
            }
            // promise 应该 resolve 应用程序实例，以便它可以渲染
            resolve(app);
        }, reject);
    });
};

在根目录下新建webpack配置文件，vue-cli3 对webpack的配置，已经转移到根目录下的vue.config.js文件内。
所以需要在根目录下新建一个 vue.config.js文件。

// vue.config.js
const vuessrserverplugin = require("vue-server-renderer/server-plugin");
const vuessrclientplugin = require("vue-server-renderer/client-plugin");
const nodeexternals = require("webpack-node-externals");
const merge = require("lodash.merge");
const target_node = process.env.webpack_target === "node";
const target = target_node ? "server" : "client";
module.exports = {
    css: {
        extract: false
    },
    configurewebpack: () => ({
        // 将 entry 指向应用程序的 server / client 文件
        entry: `./src/entry-${target}.js`,
        // 对 bundle renderer 提供 source map 支持
        devtool: 'source-map',
        target: target_node ? "node" : "web",
        node: target_node ? undefined : false,
        output: {
            librarytarget: target_node ? "commonjs2" : undefined
        },
        // https://webpack.js.org/configuration/externals/#function
        // https://github.com/liady/webpack-node-externals
        // 外置化应用程序依赖模块。可以使服务器构建速度更快，
        // 并生成较小的 bundle 文件。
        externals: target_node
            ? nodeexternals({
                // 不要外置化 webpack 需要处理的依赖模块。
                // 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
                // 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
                whitelist: [/\.css$/]
            })
            : undefined,
        optimization: {
            splitchunks: false // 这里设置为false,不然会一直build 不成功
        },
        plugins: [target_node ? new vuessrserverplugin() : new vuessrclientplugin()]
    }),
    chainwebpack: config => {
        config.module
            .rule("vue")
            .use("vue-loader")
            .tap(options => {
                merge(options, {
                    optimizessr: false
                });
            });
    }
};

修改package.json文件，在scripts属性中添加以下代码:

    "build:client": "vue-cli-service build",
    "build:server": "cross-env webpack_target=node vue-cli-service build --mode server",
    "build:win": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json"

修改main.js、router/index.js、store/index.js文件

1、main.js

// main.js
import vue from "vue";
import app from "./app.vue";
import { createrouter } from "./router";
import { createstore } from "./store";
vue.config.productiontip = false; 
export function createapp() {
  const router = createrouter();
  const store = createstore();
  const app = new vue({
    router,
    store,
    render: h => h(app)
  })
  return { app, router, store }
}

2、router/index.js

// router/index.js
import vue from "vue";
import vuerouter from "vue-router";
import home from "../views/home.vue";
vue.use(vuerouter);
const routes = [
  {
    path: "/",
    name: "home",
    component: home
  },
];
export function createrouter() {
  return new vuerouter({
    mode: "history",
    base: process.env.base_url,
    routes
  });
}

3、store/index.js

// store/index.js
import vue from "vue";
import vuex from "vuex";
vue.use(vuex);
export function createstore() {
  return new vuex.store({
    state: {},
    mutations: {},
    actions: {},
    modules: {}
  })
}

最后一步，运行命令:
$ npm run build:win
构建完成后运行命令:
$ node server