低成本代替Nuxt的预渲染解决方案
由于公司的前端框架是 Vue 全家桶,所以不可避免地要面对 SEO 的问题,然而 boss 并不想在服务器端使用Nuxt (opens new window),不然就可以顺理成章地使用Nuxt (opens new window),我也可以顺带学习下。于是 boss 让我看看有没有什么轻量级的解决方案,作为程(da)序(gong)员(zai)我怎么能说不呢!当然是一阵疯狂谷歌然后开干了。
通过一阵鼓捣之后发现结合两个webpack插件可以勉强在SEO要求不高的场景下代替SSR,当然只是本司这个业务场景下适合,如果对SEO要求比较高的话还是乖乖上Nuxt (opens new window)。
# 插件介绍:
vue-meta-info (opens new window) 设置 vue 单页面 meta info 信息,同时支持 SSR。 prerender-spa-plugin (opens new window) 在单页面应用程序中预呈现静态 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 上的文档 (opens new window)。
# 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 文档 (opens new window)了。
其实吧,如果需求比较复杂且 SEO 要求比较高的话当然是建议直接上Nuxt (opens new window)。当然,在国内最简单暴力的方法还是给某度充钱,人民币玩家才不跟你玩啥技术呢。