vue做seo优化(prerender-spa-plugin)

提示：

1，本次只介绍vue-cli3的解决方案,
2，打包之后上传到服务器才可以看到效果，或者本地自己创建一个服务
3，打包后路径不对 publicPath: './',

安装插件

npm install @dreysolano/prerender-spa-plugin

route

router.js里面把mode要为'history',hash模式会打包的时候生成同样的页面，所以一定要history

vue.congig

const { defineConfig } = require('@vue/cli-service')
const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin')

const path = require('path')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath:'./',
  productionSourceMap: true,
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: ['/','/AboutUs'],//需要打包的页面
        })
      )
    }
  },
})

main.js

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