博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

vue项目做seo优化(prerender-spa-plugin vue-meta-info)

Posted on 2018-09-27 18:02  米粒3  阅读(2509)  评论(0编辑  收藏  举报

今天公司考虑seo设计方案,服务端渲染(ssr)和 预渲染的方式,不过只是打算对几个简单的页面seo,所以选择了使用预渲染的方式,以下是实现过程中遇到的问题,供大家查看,有不对的地方请指正:

使用prerender-spa-plugin,官网文档说是必须使用history模式

1.history模式遇到的问题:

    a.刷新页面出现空白 

      按照vue-router官方文档调整nginx,

  location / {
    try_files $uri $uri/ /index.html;
  }
然后调整router/index.js ,添加 base:'/'
const router = new VueRouter({
   mode: 'history',
   base:'/',
   routes: routes
});

  最好修改config/index.js 中的build部分的 assetsPublicPath: '/',

build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),

        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/', 
        ....

  因为我们是把打包发布后的程序放在了根目录下,所以base 和 assetsPublicPath 都写了 / ,如果网站访问形式是 http://www.XXX.com/web ,则需要把 / 该为 /web/ ,否则访问不到内容

b.请求首页数据没有问题,可是请求二级页面时接口获取数据错误,查看原因是请求路径是相对路径的原因,我们用的是axios,只需要把axios的baseurl改为绝对路径即可

2.安装prerender-spa-plugin遇到的问题
a.安装有的时候会出现安装失败的情况,建议用淘宝镜像安装 cnpm i prerender-spa-plugin --save-dev
b.安装后异步数据不出现,解决办法加延时 和 跨域 处理;
webpack.prod.conf.js:
  ...
  const PrerenderSPAPlugin = require('prerender-spa-plugin')
  const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

  ...
  plugins: [
         // 在vue-cli生成的文件的基础上,只有下面这个才是我们要配置的
    new PrerenderSPAPlugin({
        // 生成文件的路径,也可以与webpakc打包的一致。
        // 下面这句话非常重要!!!
        // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
        staticDir: path.join(__dirname, '../dist'),

        // 对应自己的路由文件,如果index有参数,则prerender-spa-plugin不适用(官方文档有说明)
        routes: ['/','/pages/Detail'],

        // Server configuration options.
        server: {
          // Normally a free port is autodetected, but feel free to set this if needed.
          port: 80,
          proxy:{
            '/api': {
              target: 'http://www.xxx.com', 
              changeOrigin: true, //是否跨域
              pathRewrite: {
                  '^/api': 'api' //需要rewrite重写的,
              }
            }
          }
        }, 
        // 这个很重要,如果没有配置这段,也不会进行预编译
        renderer: new Renderer({  
          // 触发渲染的时间,用于获取数据后再保存渲染结果
          renderAfterTime: 10000,
          // 是否打开浏览器,false 是打开。可用于 debug 检查渲染结果
          headless: false
       
        })
    }),
   ...

  ]

  以下是注意点:

    A. 预渲染不适用于 渲染路由过多 和 动态路由 (如/detail/参数),只是适用于几个简单的固定路由的情景(例如 /index /about /contact)

    B.如果首页类似于今日头条(m.toutiao.com)类似的,估计也会不适用,因为它可能只会预渲染 第一个分类下的前10条..;而且只是每次打包的时候执行预渲染,如果打包后后台又发布新文章了,则会造成预渲染数据和后台数据不同步的问题;