nuxt2 使用sitemap
时间: 2025-01-17 15:04:46 浏览: 71
### 如何在 Nuxt.js 2 中使用网站地图
#### 安装 `@nuxtjs/sitemap` 模块
为了简化创建和管理站点地图的过程,在项目中安装并配置 `@nuxtjs/sitemap` 模块是一个不错的选择。此模块允许动态生成 XML 格式的站点地图文件,有助于搜索引擎更好地索引网站内容。
```bash
npm install @nuxtjs/sitemap
```
#### 配置 `nuxt.config.js`
接下来更新项目的根目录下的 `nuxt.config.js` 文件来启用该插件:
```javascript
export default {
modules: [
'@nuxtjs/sitemap'
],
sitemap: {
hostname: 'https://example.com',
gzip: true,
routes() {
return [
'/',
'/about',
'/archive',
...this.$content('blog')
.only(['path'])
.fetch()
.then(list => list.map(item => item.path))
]
}
}
}
```
上述代码片段展示了如何设置基本参数以及自定义路由列表[^1]。这里特别注意的是可以通过调用 `$content()` 方法获取静态内容路径,并将其加入到最终输出的站点地图之中。
#### 使用 Content API 动态构建 URL 列表
如果应用程序依赖于 Headless CMS 或者其他外部数据源,则可以利用异步函数返回由这些资源构成的URL集合。例如当采用 [Nuxt Content](https://content.nuxtjs.org/) 模块时,能够方便地读取本地 Markdown 文档作为博客文章或其他类型的条目。
#### 测试与部署
完成以上步骤之后,运行开发服务器 (`npm run dev`) 并访问 `/sitemap.xml` 路径即可查看实时生成的结果;对于生产环境而言,记得每次重新编译应用前清除缓存(`npm run generate && npm run start`)以确保最新更改生效。
阅读全文
相关推荐


















