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

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

文章转载：乐字节

一、创建vue项目

选择项目需要的选项，直接创建即可。

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

二、改造vue-ssr

$ NPM安装vue-服务器-渲染器lodash。合并web pack-node-externals cross-env express-registry=https://registry。NPM。淘宝。组织-保存-开发2、创建固态继电器配置文件

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

//服务器。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。resolve(_ _ dirname，file)const renderer=createBundleRenderer(require('/dist/vue-SSR-server-bundle。JSON ')，{ runInNewContext: false，template : fs。读取文件同步(解决(./index.template.html ')、“utf-8 ')、clientManifest: require('/dist/vue-SSR-客户端-清单。JSON ')、basedir: resolve('/dist ')})app。使用(express。静态(路径。加入(_ _ dirname，' dist '))应用程序。get(' * '(req，RES)={ RES . set header(' Content-Type '' text/html ')常量句柄error=err={ if(err。URL){ RES . redirect(错误。URL)} else if(err。代码===404){资源状态(404).发送(' 404 |未找到页面else { RES . status(500)} .发送(' 500 |内部服务器错误)控制台。错误(` render : ${ req。URL } `)控制台。错误(错误。stack)} } const context={ title : ' document 'url: req.url，keywords: ' 'description: ' '} renderer。rendertostring(context，(err，html)={ if(err){ return handle Error(err)} RES . send(minify(html，{ collapseWhitespace:在科学研究委员会目录下

1、entry-client.js

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

2、entry-server.js

// entry-server.jsimport { 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.jsconst 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.jsimport 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.jsimport 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.jsimport 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