vue项目做seo优化（prerender-spa-plugin vue-meta-info）

今天公司考虑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条..;而且只是每次打包的时候执行预渲染，如果打包后后台又发布新文章了，则会造成预渲染数据和后台数据不同步的问题；

vue项目做seo优化（prerender-spa-plugin vue-meta-info）

猜你喜欢