vue项目seo优化

安装依赖：

        "prerender-spa-plugin": "^3.4.0",

        "vue-meta-info": "^0.1.7"

1:main.js引入相关

import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip = false

import MetaInfo from 'vue-meta-info'

import router from './router'

Vue.use(MetaInfo)

new Vue({

render: h => h(App),

el: "#app",

components: { App },

template: "<App/>",

router,

mounted() {

document.dispatchEvent(

new Event("render-event")

); /* //document.dispatchEvent(new Event('custom-render-trigger')) 这句非常重要，否则预渲染将不会启动 */

}

}).$mount('#app')

2:在每个组件引入meta三个对象：

export default {

name: "App",

metaInfo: {

title: "首页", // 设置title

meta: [

{

// 设置关键字

name: "keyWords",

content: "公牛电器",

},

{

// 设置页面描述

name: "Description",

content: "企业使命：用电安全的救星",

},

{

name: "baidu-site-verification",

content: "插板 插座 小牛",

},

],

},

// components: {

// HelloWorld,

// },

};

3:vue.config.js引入插件

 

const { defineConfig } = require('@vue/cli-service')

const PrerenderSpaPlugin = require('prerender-spa-plugin');

const Renderer = PrerenderSpaPlugin.PuppeteerRenderer;

const path = require('path');

module.exports = defineConfig({

transpileDependencies: true,

plugins: [

new PrerenderSpaPlugin({

// 生成文件的路径，也可以与webpakc打包的一致。

// 下面这句话非常重要！！！

// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。

staticDir: path.join(__dirname, '../dist'),

// 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。

routes: ['/'],

// 这个很重要，如果没有配置这段，也不会进行预编译

renderer: new Renderer({

ignoreJSErrors: true,

inject: {

foo: 'bar'

},

headless: false,

// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。

renderAfterDocumentEvent: 'render-event'

})

})

]

})

4: 最终效果

这是最终效果。

笔记来源：

Vue项目seo优化: vue-meta-info + prerender-spa-plugin-CSDN博客