vue 配置prerender-spa-plugin、vue-meta-info 实现SEO优化

使用vite安装插件

npm i vite-plugin-prerender -D

vite.config.js配置如下：

import { fileURLToPath, URL } from 'node:url';import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
import vue2 from '@vitejs/plugin-vue2';import vitePrerender from 'vite-plugin-prerender';
const Renderer = vitePrerender.PuppeteerRenderer;
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [vitePrerender({// 要渲染的路由routes: ['/'],// 静态文件目录staticDir: path.join(__dirname, 'dist'),// 可选 - 使用 html-minifier (https://github.com/kangax/html-minifier)// 缩小生成的 HTML。// 选项参考：https://github.com/kangax/html-minifier#options-quick-referenceminify : {collapseBooleanAttributes : true ,collapseWhitespace : true ,decodeEntities : true ,keepClosingSlash : true ,sortAttributes : true ,} ,// 渲染时是否显示浏览器窗口，值写false可用于调试renderer: new Renderer({inject: {foo: 'bar'},headless: false,// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。renderAfterDocumentEvent: 'render-event'})}),vue2(),legacy({targets: ['ie >= 11'],additionalLegacyPolyfills: ['regenerator-runtime/runtime'],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),},},server: {host: '0.0.0.0',proxy: {'/prod-api': {target: 'https://www.zhongfujiayi.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},},
});

在main.js添加如下配置：

new Vue({router,render: h => h(App),mounted () {document.dispatchEvent(new Event('render-event'))}
}).$mount('#app')

vue-meta-info使用

npm install vue-meta-info --save

在main.js中挂载

import MetaInfo from 'vue-meta-info' // 注册

Vue.use(MetaInfo)

//单个页面配置
<template><div>首页</div>
</template>
export default {name:'首页'metaInfo:{title:'首页',meta:[{name: 'keyWords',content:'关键字'},{name:'description',content:'描述'}]}
}
//多页面配置
<template><div>首页</div>
</template>
export default {name:'index'metaInfo():{return{meta:this.metaData}},data(){return{metaData:''}},watch:{$route(to,form){//通过跳转页面配置每个页面的关键字和描述，这只是个例子//注意如果通过to.path去判断 需要进行兼容判断 因为渲染后的访问路径会在末尾自动添加/ 例如 loclhost:3000/index/,这个时候就需要 to.path === '/index' || to.path==='/index/'if(to.name === 'index'){this.metaData=[{name: 'keyWords',content:'关键字'},{name:'description',content:'描述'}]}//当然也可以封装一个方法去返回每个页面的文案//this.metaData = metaSetFuc(to.name)}}
}