SEO预渲染和服务器渲染

vue开发对于SEO搜索引擎是非常不友好的，因为vue是单页面应用，打包后只有一个index.html文件，所有的逻辑，跳转都在js文件里面，只能通过预渲染进行处理SEO搜索引擎优化;

1:先安装插件

vue add prerender-spa

vue.config.js里面配置

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

plugins: [

        // 配置 prerender-spa-plugin 预渲染插件

        // 生成文件的路径，此处需要与 webpack 打包地址一致，所以直接使用 config.build.assetsRoot

        // 数组为 需要预渲染的 路由，基本上是首页或者 变动不大的列表页等等，目前只支持 h5 history 方式

        new PrerenderSpaPlugin(

            path.join(config.build.assetsRoot),

            ['/', '/test']

        ),

2:修改 src/router/index.js 路由文件如下，特别注意这里要将 mode 设置为 history 模式，目前预渲染只支持该种模式

3:mian.js里面进行配置；

    new Vue({
  store,
  router,
  render: h => h(App),
  created(){
    store.commit("addMenu", router);
  },
  //添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
   /* 这句非常重要，否则预渲染将不会启动 */ 
   mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

4:npm run build打包生成了多页面的文件；

 

优势: 设置预渲染简单, 对代码的改动小

缺点: 只适合于做少数页面进行SEO的情况, 如果页面几百上千, 就不推荐了 (会打包很慢)

服务器渲染

使用nuxt，这是一个基于vue开发的前端框架
针对项目每个页面都进行seo,标题和内容可以用nuxt服务器生命钩子进行动态渲染；

这个目前没有使用过，等我尝试过后第一时间进行更新；