1. 参考

• https://ssr.vuejs.org/
• ps:因为没装上v8js

  1.1.1. centos install puppeteer 预准备

  ```

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y

yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y

## 安装 puppeteer 和 vue-server-renderer

npm -i puppeteer --save npm -i vue-server-renderer --save

##基本思路

- 通过无头浏览器预先请求目标网站 获取内容存储为单独文件
- 网站默认打开的路由 vue改为 xxx.local/home ，nginx 重定向 xxx.local/ => xxx.local/index.php
- 通过index.php 解析获取puppeteer 预先加载的html 直接返回

## 使用 renderVueComponentToString
```js
import renderVueComponentToString  from 'vue-server-renderer/basic'

//...

let vm = new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})
// 通过 `vue-server-renderer/basic.js` 暴露
renderVueComponentToString(vm, (err, res) => {
  if (err) {
    throw new Error(err);
  }
  // console.log(res)
})

1.2. to_html.js 获取html

try{
    var arguments = process.argv.splice(2);
    console.log('arguments ：', arguments);
    var uri = arguments[0];
    console.log('uri ：', uri);

    const puppeteer = require('puppeteer');
    var fs = require('fs');
    (async () => {
        const browser = await puppeteer.launch({
            'args':['--no-sandbox','--disable-setuid-sandbox']
        });
        const page = await browser.newPage();
        await page.goto(uri);
        await page.waitForSelector("#app");
        await page.waitFor(2000);
        //获取页面Dom对象
        let content = await page.content();
        content = content.replace('id="app"', 'id="app" data-server-rendered="true"')
        fs.writeFile('./dist/ssr.html', content, { 'flag': 'w+' }, function(err) {
            if (err) {
                throw err;
            }
        });
        console.log("SSR is Suc")
        await browser.close();
    })();
}catch(e){
    console.log(e)
}

• cp ./index.php ./dist/ && node ./to_html.js xxx.local/home
• 生成的sst.html 和 index.html 为同目录
• index.php 可先放到与 package.json 同目录 打包后复制文件到 dist

1.2.1. index.php

<?php 
header('Set-Cookie: cross-site-cookie=name; SameSite=None; Secure');
$html = file_get_contents("./ssr.html?t=".rand(0,100));
print_r($html);

1.3. nginx conf

server {
        listen 80;
        server_name xxx.local;
        root /package/path/dist;
        index index.php index.html;
        #  重定向 ／ => index.php
        location ~ ^/$ {
          rewrite  ^.*$ /index.php  permanent;
        }

        location / {
               try_files $uri $uri/ /index.html;
        }
        location ~ \.php$ {
                try_files $uri /index.php =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass 127.0.0.1:9000; # 端口自调
                fastcgi_index index.php;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                include fastcgi_params;
        }
        //.... other

        error_page 500 502 503 504 /500.html;
        client_max_body_size 20M;
        keepalive_timeout 10;
}

• Crontab 定时执行 生成ssr.html

package.json 改造

"ssrs": {
    "local": "http://xxx.local/home",
  },
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build-ssr-local": "node build/build.js",
    "postbuild-ssr-local": "#SSR 本地预渲染 \t cp ./index.php ./dist/ && node ./to_html.js $npm_package_ssrs_local",
  }