前言
sitemap.xml的作用是将我们网站的所有页面都被SEO（浏览器搜索引擎）收录，我们网站的内容更容易被用户搜到，同时增加我们的网站的知名度，排名更靠前。简言之就是用技术做网站推广，所以对于网站推广sitemap站点地图的这门技术还是很重要滴，实现过程有点小繁琐，但是却不难，废话不多说，我们开始今天的教程吧。
操作流程
1、安装依赖
npm install @nuxtjs/sitemap
此链接是sitemap在npm上的官方文档
2、打开nuxt.config.js，将其依赖添加进去，代表我们整个项目使用这个依赖
注意：之前引入的依赖不用删，只需要将sitemap加在后面
{modules: ['@nuxtjs/sitemap'],}
3、进入static文件夹，创建sitemap.js，内容如下
1、各配置项的讲解
import axios from "axios"; // 引入axios，动态生成站点地图需要用到const sitemap = {path: "/sitemap.xml", //生成的文件路径hostname: "/", // 你的网站地址cacheTime: 1000 * 60 * 60 * 24, //一天的更新频率，只在generate:false有用gzip: true, //用gzip压缩优化生成的 sitemap.xml 文件 generate: false, exclude: [], //排除不需要收录的页面，这里的路径是相对于hostname, 例如: exclude: ['/404',...]// 每个对象代表一个页面，这是默认的defaults: {changefred: "always", // 收录变化的时间，always 一直，daily 每天lastmod: new Date(), // 生成该页面站点地图时的时间priority: 1, // 网页的权重 1是100%最高，一般给最重要的页面，不重要的页面0.7-0.9之间},routes: async () => {return routes},};export default sitemap;
2、生成静态代码
这里主要放那种不需要携带的页面，示例： /pressCenter，每个对象的url的前缀是自动相对上面hostname网站地址的，所以只需要写你的路由就行。
routes: async () => {// 静态路由let routes = [{url: `/`,changefred: "daily",lastmod: new Date(),priority: 1,},{url: `/pressCenter`,changefred: "daily",lastmod: new Date(),priority: 0.9,},];return routes}
3、生成动态代码
动态指的是类似详情页这种 /detail?id=1 ,这种是根据后端数据自动生成的，不可能手动一个一个去加，那样就太机械了，不符合我们写程序的风格，所以这一小节就是讲如何生成动态站点地图。
let axiosUrl = "你的接口请求前缀"; // 示例 "/api/"let prodRoutes = [];let newsRoutes = [];// Promist.all并发调接口 所有异步接口同时调用，缩短生成站点地图的时间,通过解构取出接口返回的数据let [productList, newsList] = await Promise.all([axios.get(axiosUrl + "product/list"),axios.get(axiosUrl + "news/list"),]);// 商品详情 /* 200状态码判断这块属于代码优化 成功才进来，否则之间打印错误信息，由于nuxt有时出问题能提供给我们的信息非常匮乏，假设某天接口出问题，到时很难定位问题，所以加这个主要是方便我们后期的维护。 */if (productList.data.code == 200) {let proList = productList.data.rows; // 这个对应接口返回的列表// 用map将列表里的每个对象的id组装同时生成新的对象，每个对象生成后的样子，见下面标注1prodRoutes = proList.map((item) => {return {url: `/product/twoPage/threePage?id=${item.id}`,changefred: "daily",lastmod: new Date(),priority: 1,};});} else {console.log(productList.data.msg, "sitemap调用错误+productList");}// 文章详情if (newsList.data.code == 200) {let newsArr = newsList.data.rows;newsRoutes = newsArr.map((item) => {return {url: `/pressCenter/article?id=${item.id}`,changefred: "daily",lastmod: new Date(),priority: 1,};});} else {console.log(newsList.data.msg, "sitemap调用错误+newsList");}// 最后统一将所有组装好的数组合并到总数组中,记住传入合并的数组顺序要跟Promise.all调用接口的顺序一致，否则会出问题// 合并后的样子 见下面标注2return routes.concat(prodRoutes, newsRoutes);
标注1
// 示例：某一路由对象生成后的样子{url: `/pressCenter/article?id=1`,changefred: "daily",lastmod: new Date(),priority: 1,}
标注2
routes.concat是数组合并的方法，我们可以利用它将静态和动态站点对象合并到一个路由数组，sitemap最终会拿这个数组去处理成真正的sitemap.xml数据
[{url: `/`,changefred: "daily",lastmod: new Date(),priority: 1,},{url: `/product/twoPage/threePage?id=1`,changefred: "daily",lastmod: new Date(),priority: 1,},{url: `/pressCenter/article?id=1`,changefred: "daily",lastmod: new Date(),priority: 1,},...]
4、在nuxt.config.js引入并全局使用sitemap.js 配置文件
// nuxt.config.jsimport sitemap from "./static/sitemap";// sitemap跟modules是同级的，一般放在modules的上面或者下面modules: ["@nuxtjs/sitemap"],sitemap: sitemap,
5、sitemap.js完整代码
import axios from "axios"; //const sitemap = {path: "/sitemap.xml", //生成的文件路径hostname: "/", //网站的网址cacheTime: 1000 * 60 * 60 * 24, //一天的更新频率，只在generate:false有用gzip: true, //用gzip压缩优化生成的 sitemap.xml 文件 generate: false,exclude: [], //排除不要的页面，这里的路径是相对于hostnamedefaults: {changefred: "always",lastmod: new Date(),},routes: async () => {// 静态路由let routes = [{url: `/`,changefred: "daily",lastmod: new Date(),priority: 1,},{url: `/pressCenter`,changefred: "daily",lastmod: new Date(),priority: 0.9,},];// 以下都是动态路由let axiosUrl = "你的接口请求前缀"; // 示例 "/api/"let prodRoutes = [];let newsRoutes = [];// 并发调接口let [productList, newsList] = await Promise.all([axios.get(axiosUrl + "product/list"),axios.get(axiosUrl + "news/list"),]);// 商品详情if (productList.data.code == 200) {let proList = productList.data.rows;prodRoutes = proList.map((item) => {return {url: `/product/twoPage/threePage?id=${item.id}`,changefred: "daily",lastmod: new Date(),priority: 1,};});} else {console.log(productList.data.msg, "sitemap调用错误+productList");}// 文章详情if (newsList.data.code == 200) {let newsArr = newsList.data.rows;newsRoutes = newsArr.map((item) => {return {url: `/pressCenter/article?id=${item.id}`,changefred: "daily",lastmod: new Date(),priority: 1,};});} else {console.log(newsList.data.msg, "sitemap调用错误+newsList");}return routes.concat(prodRoutes, newsRoutes);},};export default sitemap;
6、如何生成sitemap.xml文件
1、将nuxt 项目启动
打开 static -> robots.txt 文件，还没robots.txt文件的点我进入教程，加两个Sitemap属性，一个本地项目地址和一个线上地址。生成sitemap.xml文件时 需要把线上的地址用#号注释掉，然后将本地的链接 例如 http://192.168.1.193/sitemap.xml 放到浏览器访问一下，193对应你的主机ip。User-agent: *Disallow:# Sitemap: /sitemap.xmlSitemap: http://192.168.1.193/sitemap.xml
2、访问后是这个样子，然后CTRL + S 保存sitemap.xml到桌面，至此sitemap.xml生成的步骤到此就结束啦。
<loc>标签中的网站地址是根据sitemap.js中的hostname设置的值
3、生成完毕后将robots.txt 的sitemap改为线上地址
User-agent: *Disallow:Sitemap: /sitemap.xml# Sitemap: http://192.168.1.193/sitemap.xml
4、nuxt前端npm run build:prod打个包给后端
7、如何将sitemap.xml上传到服务器
这里以服务器Nginx为例
1、上传到这里
2、 在Nginx的配置文件配置sitemap.xml的访问路径
配置完Nginx reload重载一下，然后打开网页 你的网址/sitemap.xml 看能否访问，可以的话说明你的网站已经被百度成功收录啦。
8、题外话
这篇文章最近刚写完，部分错别字或者某些句子表达得有问题的后续会慢慢更正过来。
