VUE的SEO的解决方案

解决方案如下：

1.首先需要安装prerender-spa-plugin和vue-meta-info，prerender-spa-plugin解决打包多个页面，vue-meta-info解决SEO的问题

npm install --save prerender-spa-plugin
npm install --save vue-meta-info

2.在项目中找到webpack.prod.conf.js，有可能这个文件名不同，这个时候你需要根据你的命令行来找到相关文件

 在此文件中添加如下代码('/cart','list'这是route的路径)

 贴上相关代码

const PrerenderSPAPlugin = require('prerender-spa-plugin')

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

new PrerenderSPAPlugin({

      // Required - The path to the webpack-outputted app to prerender.

      staticDir: path.join(__dirname, '../dist'),

      // Required - Routes to render.

      routes: [ '/', '/cart', '/list'],

      renderer: new Renderer({

        inject: {

          foo: 'bar'

        },

        headless: false,

        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。

        renderAfterDocumentEvent: 'render-event'

      })

}),

 

3.在VUE项目中添加相关代码

4.到这里就完成打包成多个页面，执行打包命令

npm run build

5.打包完成会出现相关文件夹，每个文件都有相关的index,html说明打包成功

 5接下去就是解决SEO的问题，main.js中导入vue-meta-info，然后使用

 6然后在需要的组件中添加如下代码

7.再执行打包程序，这时候你再相关html页面中查找相关meta