看了vue 官方的文檔浑度，還是有點懵的寇窑。百度了一堆東西，終于成功的配置出基于vue-cli3的vue-ssr 服務端預渲染箩张。
有幫助的話甩骏，還請點個贊
建議使用nuxt，可以更好的做服務端渲染先慷。
需要自己創(chuàng)建index.template.html文件饮笛。這個文件在
一、創(chuàng)建vue項目
$ vue create vue-ssr創(chuàng)建目錄名為vue-ssr的項目
選擇項目需要的選項论熙，直接創(chuàng)建即可福青。
$ cd vue-ssr創(chuàng)建完成后，進入項目目錄。
二无午、改造vue-ssr
1媒役、安裝環(huán)境
$ npm install vue-server-renderer lodash.merge webpack-node-externals cross-env express --registry=https://registry.npm.taobao.org --save-dev
2、創(chuàng)建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 => {
// 因為有可能會是異步路由鉤子函數(shù)或組件次泽，所以我們將返回一個 Promise穿仪，
// 以便服務器能夠等待所有的內(nèi)容在渲染前，
// 就已經(jīng)準備就緒意荤。
return new Promise((resolve, reject) => {
const { app, router } = createApp();
// 設置服務器端 router 的位置
router.push(context.url);
// 等到 router 將可能的異步組件和鉤子函數(shù)解析完
router.onReady(() => {
const matchedComponents = router.getMatchedComponents();
// 匹配不到的路由啊片，執(zhí)行 reject 函數(shù)，并返回 404
if (!matchedComponents.length) {
return reject({
code: 404
});
}
// Promise 應該 resolve 應用程序?qū)嵗料瘢员闼梢凿秩? resolve(app);
}, reject);
});
};
- 在根目錄下新建webpack配置文件紫谷，vue-cli3+對webpack的配置，已經(jīng)轉(zhuǎn)移到根目錄下的
vue.config.js文件內(nèi)捐寥。
所以需要在根目錄下新建一個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
然后到瀏覽器打開 http://localhost:8000 如果出現(xiàn)了頁面內(nèi)容腰耙，則證明配置成功榛丢！
