通常情况下vue属于单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。而对于想被搜索引擎收录的网站而言并不是好事，异步加载的页面不利于搜索引擎抓取，如果用vue开发博客网站，就需要进行SEO优化，这样网站的内容才能被收录到各个引擎中，方便用户通过搜索引擎搜索到发布的博文，下面介绍三种方法对vue进行SEO优化

环境

vue2
vue/cli 5.0.8
nodejs 8.12.0

生成站点地图

站点地图可以很好的帮助搜索引擎收录网站，可以通过使用sitemap-webpack-plugin在构建完工程后在dist路径下生成sitemap.xml站点地图文件

在对应工程下安装插件sitemap-webpack-plugin

npm install sitemap-webpack-plugin --save-dev

2.vue.config.js中新增相应配置

//引用sitemap-webpack-plugin模块
const SitemapPlugin = require("sitemap-webpack-plugin").default;

//在configureWebpack中加入网站基本访问路径，paths为站点地图列表
module.exports = defineConfig({  
  configureWebpack: {  
    plugins: [   
      new SitemapPlugin({ base: "https://laijava.com", paths }),  
    ],  
  },  
});

// 站点地图  
const paths = [  
  {  
    path: "/",  
    lastmod: "2022-12-18",  
    priority: 1.0,  
    changefreq: "yearly",  
  },  
  {  
    path: "/about/",  
    lastmod: "2022-12-18",  
    priority: 0.9,  
    changefreq: "yearly",  
  },  
];

上述配置生成的loc是 base + path生成后需要进行检查核对

相关文档：sitemap-webpack-plugin

页面进行预渲染

使用prerender-spa-plugin-next对指定路由进行预渲染，生成给指定个路径生成独立index.html；这种做法并不适用于任何场景，该插件是使用无头浏览器，加载应用程序路由，将访问结果保存到静态的HTML文件中；所以并不适用于动态内容的展现，同时不适用于有大量路由的站点（项目build的时候需要更长的时间）。

在对应工程下安装插件prerender-spa-plugin-next

npm i prerender-spa-plugin-next -D

vue.config.js中新增相应配置

//引用prerender-spa-plugin-next模块
const PreRenderSPAPlugin = require("prerender-spa-plugin-next");

//在configureWebpack指定需要预渲染的路径
module.exports = defineConfig({  

  configureWebpack: {  
    plugins: [  
      new PreRenderSPAPlugin({  
        routes: ["/", "/about"],  
      })
    ],  
  },  
});

npm run build正常可以看到指定的路径会在对应页面生成index.html

相关文档：prerender-spa-plugin-nex

给页面添加mate与title信息

通过vue-meta-info对每个页面进行定制化配置添加title与mate进行seo优化，vue-meta-info 是一个基于vue 2.0的插件，它会让你更好地管理你app 里面的meta 信息。你可以直接在组件内设置 metaInfo 便可以自动挂载到你的页面中。

在对应工程下安装插件vue-meta-info

npm install vue-meta-info --save

在main.js全局引入vue-meta-info

import MetaInfo from "vue-meta-info";
Vue.use(MetaInfo);

在组件内使用MetaInfo

<template>
</template>

<script>

  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]

      link: [{                 // set link
        rel: 'asstes',
        href: 'https://laijava.com/'
      }]
    }
  }

</script>

相关文档：vue-meta-info

目录CONTENT

VUE2 SEO优化

环境

生成站点地图

页面进行预渲染

给页面添加mate与title信息

评论区