低成本代替Nuxt的预渲染解决方案
Mercer-Lee 2019-01-05
JS
Chrome
由于公司的前端框架是 Vue 全家桶，所以不可避免地要面对 SEO 的问题，然而 boss 并不想在服务器端使用Nuxt，不然就可以顺理成章地使用Nuxt，我也可以顺带学习下。于是 boss 让我看看有没有什么轻量级的解决方案，作为程(da)序(gong)员(zai)我怎么能说不呢！当然是一阵疯狂谷歌然后开干了。
通过一阵鼓捣之后发现结合两个webpack插件可以勉强在SEO要求不高的场景下代替SSR，当然只是本司这个业务场景下适合，如果对SEO要求比较高的话还是乖乖上Nuxt。
# 插件介绍：
vue-meta-info 设置 vue 单页面 meta info 信息，同时支持 SSR。 prerender-spa-plugin 在单页面应用程序中预呈现静态 HTML。
- 第一个插件是国内一个小哥写的，同时他也推荐配合 prerender-spa-plugin 插件使用，我也确实用了，感觉还是挺配的。
# vue-meta-info 使用介绍：
还是建议各位猿去看下 GitHub 上的文档，毕竟作者是最熟悉自己写的项目的。
NPM：
$ npm install vue-meta-info --save
全局引入：
import Vue from "vue";
import MetaInfo from "vue-meta-info";
Vue.use(MetaInfo);
组件内使用：
export default {
metaInfo: {
title: 'My Example App', // 标题
meta: [{ // meta的内容
name: 'keyWords',
content: 'My Example App'
}]
link: [{ // link链接
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
上述内容都是前端和 SEO 的一些基础，如果已经有现成的线上内容就可以打开 F12 复制粘贴。 我写到这里就够用了，因为对 SEO 的要求也不高，当然如果你的 title 和 meta 是异步加载的，也可以按照下面的来配置。
export default {
name: "async",
metaInfo() {
return {
title: this.pageName
};
},
data() {
return {
pageName: "loading"
};
},
mounted() {
setTimeout(() => {
this.pageName = "async";
}, 2000);
}
};
# 插件还支持 SSR，不过这里不介绍了，需要的话自行去看 GitHub 上的文档。
# prerender-spa-plugin 使用介绍：
其实这个插件还依赖 chromium 内核，有兴趣的朋友可以去看下渲染原理，这里还可以顺带了解下爬虫的知识。
- 我司的 webpack 配置是直接自己配置，没有使用 vue-cli3，所以大家可以参考结合一下。
const path = require("path");
const PrerenderSPAPlugin = require("prerender-spa-plugin");
module.exports = {
plugins: [
...new PrerenderSPAPlugin({
// 编译输出的文件路径和文件夹名
staticDir: path.join(__dirname, "dist"),
// 需要预渲染的路由，可以对照自己的router文件来写
routes: ["/", "/about", "/some/deep/nested/route"]
})
]
};
如果你有很多子路由的话，routes 那里 index.vue 是不用写上去的，比如/home/index 和/home 是会编译成相同的文件，可以参照我的：
new PrerenderSpaPlugin({
staticDir: path.join(__dirname, '../dist'),
ouputDir: path.join(__dirname, '../dist/loader'),
routes: [
'/',
'/home',
'/home/info',
'/activity',
'/activity/rank',
'/title',
'/title/optimize',
'/title/long',
'/goods',
'/goods/similar',
'/mall',
]
# 一般来说这样配合 vue-meta-info 是可以完成常规的 SEO 需求了，打包的时候会生成静态 HTML 文件，title 和 meta 以及 HTML 内容都可以被爬虫抓取到。如果想要高级的用法肯定还是要仔细阅读他的GitHub 文档了。
其实吧，如果需求比较复杂且 SEO 要求比较高的话当然是建议直接上Nuxt。当然，在国内最简单暴力的方法还是给某度充钱，人民币玩家才不跟你玩啥技术呢。