vue项目seo方法

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，描述，关键词也是无效的