从零开始搭建vue-ssr系列之五：开始第一个简单的server-render

开始一个简单的server-render

• 客户端打包需要的文件是这个：tools/webpack.js，很显然，既然vue在服务端渲染，那就需要有一个服务器的webpack文件，所以有tools下面就多出一个webpack.server.js的文件，里面的内容很简单，如下：

const path = require('path');
//  获取项目根目录
const projectRoot = path.resolve(__dirname, '..');
module.exports = {
    target: 'node', // 这里必须是node，因为打包完成的运行环境是node
    entry: path.join(projectRoot, 'src/server-index.js'),
    output: {
        libraryTarget: 'commonjs2', // !different
        // 打包出的路径
        path: path.join(projectRoot, 'build'),
        // 打包最终的文件名
        filename: 'bundle.server.js',
    },
    module: {
        // 因为使用webpack2，这里必须是rules，如果使用use， 
        // 会报个错：vue this._init is not a function
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: projectRoot,
                // 这里会把node_modules里面的东西排除在外，提高打包效率
                exclude: /node_modules/,
            }
        ]
    },
}

注：具体里面的功能，请看注释

• 有了这个webpack.server.js之后，里面的入口文件是server-index.js，和前端打包一样，服务端打包可得有一个入口文件，里面最主要的内容就是你要打包哪个.vue文件，里面的内容是

// 这个文件里面除了定义入口的.vue，其他的都不用配置
import Vue from 'vue';
// 引入.vue入口文件
import App from './component/List.vue';
const app = new Vue(App);
// 你问我这块代码是啥意思，其实我也不知道，想要打包server端代码，这个代码块是必须的
// 以后会在这段代码里面加入其他一些配置信息
export default function (context) {
    return new Promise((resolve, reject) => {
        resolve(app);
    });
};

• 现在你使用webpack来打包文件，在build目录下面会生成一个bundle.server.js文件，详见tools/dev.js

• 接下来就是比较关健的一步了，如何把bundle.server.js里面的内容，转成HTML。这个项目里面，我们使用的express

  • 第一步：我们增加app.get('/', function (req, resp) {...})，这样我们就可以在访问localhost:5000时能看到效果
  • 第二步：npm install vue-server-renderer --save，其实这个包我们现在才开始用，*注：这个包必须和vue的版本必须一致，目前都是2.3.2，不管哪个版本，版本号必须严格一致，否则会报warning*
  • 第三步：读取bundle.server.js，
  • 第四步：把上面读取的js文件，传递给vue-ssr，代码: const bundleRenderer = vueServerRenderer.createBundleRenderer(code);这步的作用是解析bundle.server.js，然后生成HTML，注：vueServerRenderer提供两个方法，分别为：createBundleRenderer和createRenderer，使用webpack打包的Component代码，必须作用createBundleRenderer这个方法，具体参照：官方文档，参数就是上面读取的js文件
  • 第五步：渲染，最终生成HTML，bundleRenderer.renderToString((err, html) => {console.log(html)})
• server.js代码完整版本

    const filePath = path.join(__dirname, './build/bundle.server.js')
    const code = fs.readFileSync(filePath, 'utf8');
    const bundleRenderer = vueServerRenderer.createBundleRenderer(code);
    bundleRenderer.renderToString((err, html) => {
        if (err) {
            console.log(err.message);
            console.log(err.stack);
        }
        console.log(html);
        resp.send(html)
    });

• 总结下生成HTML的步骤

  • 1.有一个你想打包.vue文件的入口文件，就是src/server-index.js
  • 2.在webpack的配置文件中，把入口文件指向他
  • 3.使用webpack对文件进行打包，会生成build/bundle.server.js文件
  • 4.使用vue-server-renderer包解析这个文件，最终渲染成HTML
• 最终效果(浏览器端)：

• 最终效果（console端）：

码上GitHub

---

Vue-SSR系列目录

从零开始搭建vue-ssr系列之一：写在前面的话

从零开始搭建vue-ssr系列之二：纯client端渲染以及webpack2+vue2注意事项

从零开始搭建vue-ssr系列之三：服务器渲染的奥秘

从零开始搭建vue-ssr系列之四：Vuex详解

从零开始搭建vue-ssr系列之五：开始第一个简单的server-render

从零开始搭建vue-ssr系列之六：一个完整的项目