SOE:搜索引擎优化
最基本的条件:
1、多页面 =》 蜘蛛抓取
2、页面还有蜘蛛抓取的内容
3、title 、 描述 、 关键词
解决方案一: 预渲染
在 vue.config.js 的配置文件中配置(打包成多页面 prerender-spa-plugin-next )
const path = require("path")
const PrerenderSPAPlugin = require("prerender-spa-plugin-next")
// 可选
const renderer = require("@prerenderer/renderer-puppeteer")
module.exports = {
lintOnSave: "warning",
publicPath: "/",
assetsDir: "static",
configureWebpack (config) {
if (process.env.NODE_ENV === "production") {
const prerenderCfg = new PrerenderSPAPlugin({
routes: ["/", "/about"],
// 可选
renderer,
postProcess (context) {
context.outputPath = path.join(
// 不要拼__dirname,最终会转成绝对路径,拼了反而出错。
// PS: 为什么要加一层文件夹? 因为默认写入首页叫index.html, 不加会导致写入冲突 ——_——#
"rerender",
(context.route.replace("/", "") || "index") + ".html"
)
return context;
},
renderOptions: {
renderAfterDocumentEvent: "prerender",
},
})
config.plugins.push(prerenderCfg)
}
},
}
要是想动态的改变title的话, 下载 vue-meta-info 插件
在main.js直接引入
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
在每一个组件里面加上
export default{
metaInfo: {
title: '小鹿仙官网',
meta: [{
name: '关键词, web前端',
content: '描述'
}]
},
data() {
return{}
}
}
预渲染的缺点:
如果有很多详情页需要seo就不适合了, 动态改变title,描述,关键词也是无效的