//webpack.server.config.js用来生成vue-ssr-server-bundle.json const merge = require('webpack-merge') const baseConfig = require('./webpack.base.js') const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') module.exports = merge(baseConfig, { entry: './entry-server.js', // 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import)， // 并且还会在编译 Vue 组件时， // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。 target: 'node', // 对 bundle renderer 提供 source map 支持 devtool: 'source-map', // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports) output: { libraryTarget: 'commonjs2' }, // 这是将服务器的整个输出 // 构建为单个 JSON 文件的插件。 // 默认文件名为 `vue-ssr-server-bundle.json` plugins: [ new VueSSRServerPlugin() ] })
这个配置哪都能找到，重点是VueSSRServerPlugin这个插件，生成vue-ssr-server-bundle.json全靠它，去掉的话生成的是built-server-bundle.js；关于merge插件，libraryTarget,target配置问题自己百度webpack去0.0；
//entry-server.js import { createApp } from './src/app' export default context => { return createApp() }
固定写法，返回一个函数供createBundleRenderer使用；
生成vue-ssr-server-bundle.json
到目前为止安装的插件有：
自己手动一个一个装就行了。
生成vue-ssr-server-bundle.json，使用webpack命令
一切都手动，熟悉webpack;
修改server.js
const express = require('express'); const chalk = require('chalk'); const server = express(); const serverBundle = require('./dist/vue-ssr-server-bundle.json')//**新增**// const renderer = require('vue-server-renderer').createBundleRenderer(serverBundle,{ runInNewContext: false, // 看名字也知道是生成某个新的Context对象,默认是true,改成false理解为某种缓存机制，提高服务器效率 template: require('fs').readFileSync('./index.html', 'utf-8'), })//**新增**// server.get('*', (req, res) => { //res.set('content-type', "text/html"); //res.end(` //<!DOCTYPE html> //<html lang="en"> // <head><title>Hello</title></head> // <body > // <div>你好</div> // </body> // </html> //改成下面这样 const context = {//这里的参数现在还没用，但这个对象还是得用，要做renderToString的参数 url:req.url } renderer.renderToString(context, (err, html) => { if (err) { res.status(500).end('Internal Server Error') return } else { res.end(html) } }) `) }) server.listen(8080,function(){ let ip = getIPAdress(); console.log(`服务器开在：${chalk.green(ip)}:${chalk.yellow(8080)}`) }) function getIPAdress(){//node下的os模块可以拿到启动该文件的服务端的部分信息，细节自己去node上面查 var interfaces = require('os').networkInterfaces(); for (var devName in interfaces) { var iface = interfaces[devName]; for (var i = 0; i < iface.length; i++) { var alias = iface[i]; if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) { return alias.address; } } } }
试一蛤：node server.js
正常，箭头指的地方官网有解释。别忘了inde.html中加入一行注释：
后续修改title,meta头部都是通过类似的注释方式，原理就是正则匹配替换字符串-。-；
>加入路由vue-router
新增几个文件
需要修改的文件有：
App.vue//加个router-view就行
//app.js import Vue from 'vue' import App from './App.vue' import router from './router' export function createApp(){ const app = new Vue({ router, render:h => h(App) }) return {app,router} }
把app实例和router都抛出去，给entry-server.js用