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-reference
      minify : {
        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)
		}
	}
}