预渲染(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如下,说明是可以获取到调用接口后的页面的。