看了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=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
},
// webpack.js.org/configurati…
// github.com/liady/webpa…
// 外置化应用程序依赖模块。可以使服务器构建速度更快，
// 并生成较小的 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: {} }) } 最后一步，运行命令: node server 然后到浏览器打开 http://localhost:8000 如果出现了页面内容，则证明配置成功！
文章转载：乐字节
