对前端而言,迎合搜索引擎的需求也是常有的。对于 Vue 技术栈而言,Nuxtjs 是不二之选。最近刚做完一个类似需求,在此记录一二。
生成网站地图
Nuxtjs 提供了相关的组件,我们直接使用即可。
安装组件
npm install @nuxtjs/sitemap --save
配置
在nuxt.config.js
中添加组件的配置
{
...
modules: [
'@nuxtjs/sitemap'
],
...
}
配置网站地图
{
...
modules: [
'@nuxtjs/sitemap'
],
sitemap: {
hostname: 'https://example.com',
gzip: true,
exclude: [
'/login'
],
routes: [
'/'
]
}
...
}
以上为一个简单的例子,访问https://example.com/sitemap.xml
可以查看生成的网站地图
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://example.com/</loc>
</url>
</urlset>
这种“写死”的用法肯定是无法满足项目需求的,根据数据动态生成才是我们想要的
// 导入 axios,也可以是其他用着顺手的组件
import axios from 'axios'
export default {
...
sitemap: {
hostname: 'https://example.com',
gzip: true,
exclude: [
'/lo