1.使用vite-plugin-seo-prerender做页面预渲染(vite)
使用npm 安装vite-plugin-seo-prerender
npm vite-plugin-seo-prerender 解决打包多个页面
配置vite.config文件
//vite.config.js
import seoPrerender from 'vite-plugin-seo-prerender'
export default defineConfig({
plugins: [
seoPrerender({
routes: [
'/index/hom'
] // 需要生成的路由
})
]
})
这样运行run build时就可以打包多个页面
2.解决页面路由元信息配置问题
使用 vue-meta-info 进行配置路由元信息
npm vue-meta-info 设置title、描述、关键字,解决SEO的问题
配置main.js文件
//main.js
import App from "./App.vue";
import MetaInfo from 'vue-meta-info'
createApp(App).use(MetaInfo)
在需要的页面中配置路由元信息
//hom.vue
export default {
metaInfo: {
title: 'My Page Title',
meta: [
{ name: 'description', content: 'This is the description of my page' },
// 其他元信息...
],
// 其他元信息...
},
// 组件的其余部分...
}
3.检查是否成功
使用浏览器的开发者工具(如Chrome的开发者工具)检查页面的源代码。找到<head>
标签,并确认是否正确地包含了你设置的元信息。