前端做预渲染进行seo搜索引擎优化

这段时间有个项目用的vue2.x进行开发，但是需要被百度收录，但是大家都知道vue是单页面应用，这就对seo很不友好，然后发现主要有以下两种解决办法，一个是服务端的ssr的一个渲染，一个是前端的预渲染。今天主要将以下前端的预渲染的问题
首先在项目目录下 进行下载插件如下 `

cnpm install prerender-spa-plugin --save

这里需要注意的是用npm会报错，不知道是我网的问题还是啥问题，就用cnpm下载
下载成功之后就是在build文件夹下面找到webpack.prod.conf.js中，在头部加入如下图红色方框中的内容：
然后再文件中搜索plugins这个配置：
下面加入如下插件

 new PrerenderSPAPlugin({
            // 生成文件的路径，也可以与webpakc打包的一致。
            // 非常重要: 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
            staticDir: path.join(__dirname, '../dist'),
            // 对应自己的路由文件
            routes: ['/', '/home', '/ques_list/param1', '/ques_list_detail/param2'],
            // 这个很重要，如果没有配置这段，也不会进行预编译
            renderer: new Renderer({
                inject: {
                    foo: 'bar'
                },
                headless: false,
                // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                // renderAfterDocumentEvent: 'render-event'
            }),
        }),

这块需要有个注意的点：就是在打包的时候会报一个路由的错，然后就是把如下方框的东西给注释了，然后没有挂载到main.js当中

发现打包就可以了，然后再下载vue-meta-info
在main.js中加入

然后再需要的页面用
然后进行打包，在项目的目录下进行 npm run build

应该是多页面的这种，然后压缩丢给后台。

上线访问的时候我访问home的时候

访问列表页的会后就是

以上就是预渲染的部分。