众所周知vue项目本质是单页面项目，对SEO优化十分不好，找起资料来更是麻烦。闲话不多说，分享一下我对自己项目进行的SEO方案及生成sitemap.xml。
需要的库

npm install sitemap-webpack-plugin --save-dev
npm install prerender-spa-plugin -D
前者是用来生成sitemap的，后者是SEO方案

• vue.config.js

const PreRenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PreRenderSPAPlugin.PuppeteerRenderer
const path = require('path')
const webpack = require('webpack')
//下面这个routes理论上可以直接require('./src/router.paths').default.map(r => r.path).filter(p => !p.match(/\*/))这么引入
//如果你的route文件是单独把路径写在其他文件里面，不包括引入vue等操作的话。
//否则就和我一样，不要偷懒，手动写入路由链接
const routes = ['/', '/test1', '/test2', '/test3']
const SitemapPlugin = require('sitemap-webpack-plugin').default
\module.exports = {
  publicPath: './',
  devServer: {
    port: 5888
  },
  pages: {
    index: {
      entry: 'src/main.js',
      title: 'test'
    }
  },
  configureWebpack: config => {
    return {
      plugins: [
        new PreRenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: routes,
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            //在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event',
            args: ['--no-sandbox', '--disable-setuid-sandbox']
          })
        }),
        new SitemapPlugin('https://www.test.com', routes, {
          fileName: 'sitemap.xml',
          lastMod: true,
          changeFreq: 'monthly'
        })
      ]
    }
  }
}

• main.js

new Vue({
  router,
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  },
  render: h => h(App)
}).$mount('#app')

• router.js

 mode: 'hash'
 //切记模式要切换为hash，history不管用的

以上配置完成，打包完之后，sitemap.xml就放在dist文件夹之中。需要注意的是因为这个SEO方案是对vue项目进行预渲染，所以每次不仅是打包，而且保存的时候也要花费大量时间预渲染，极其不推荐在项目完成之前进行这项工作。
最后，我本身也是个小白，对以上知识点同样一知半解，欢迎评论斧正

参考资料：
https://juejin.im/post/5dcbc2196fb9a0606f094186
https://github.com/40818419/vue-router-sitemap/issues/9