关于预渲染 -- 可以获取到调用接口后渲染的页面

预渲染（prerender-spa-plugin），简而言之就是配置路由文件的参数，webpack打包生成html。好处是首屏优化和SEO。本文是为了验证预渲染是否能够获取到调用接口后渲染的页面。

about.vue：

 <div class="about">
    <h1>About</h1>
    {{ msgGet1 }}
    {{ msgGet2 }}
    <ul>
      <router-link to="/" tag="li">home</router-link>
      <router-link to="/about" tag="li">about</router-link>
      <router-link to="/contact" tag="li">contact</router-link>
    </ul>
  </div>

<script>
import http from "@/http.js";
export default {
  name: "About",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      msgGet1: "预加载data1",
      msgGet2: "预加载data2"
    };
  },
  methods: {
    apiGet() {
      setTimeout(() => {
        this.msgGet1 = "我是变化了的";
      }, 100);
      http
        .get("XXXX")
        .then(res => {
          this.msgGet2 = "我没有改变" + res.return_msg;
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.apiGet();
  }
};
</script>

这是我npm run build后，build里头about文件夹下的about.html：（打包自动生成） 

可以看到请求接口的动态数据是没有在这个html文件里的，我一开始以为这样代表着预渲染获取不到调用接口后渲染的页面。

之后我开启http-server本地服务，发现返回的html如下，说明是可以获取到调用接口后的页面的。