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

男娘i 2023-01-09 12:54 162阅读 0赞

预渲染（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>

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20221119/ed7c2bc3d415447e94eccb9d9ecca578.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1]: /images/20221119/517ff1b7070f47da814ecfb62dea88c0.png