從零開始搭建vue-ssr系列之五：開始第一個簡單的server-render

時間 2019-11-06

標籤開始搭建 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/,
            }
        ]
    },
}

注：具體裏面的功能，請看註釋html

有了這個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的步驟vue
- 1.有一個你想打包.vue文件的入口文件，就是src/server-index.js
- 2.在webpack的配置文件中，把入口文件指向他
- 3.使用webpack對文件進行打包，會生成build/bundle.server.js文件
- 4.使用vue-server-renderer包解析這個文件，最終渲染成HTML
最終效果(瀏覽器端)：