最近做項(xiàng)目的時(shí)候，被要求做seo，由于項(xiàng)目已經(jīng)開發(fā)完畢，且只需首頁做seo，所以考慮再三，決定用prerender-spa-plugin結(jié)合vue-meta-info來實(shí)現(xiàn)首頁的seo。
如果你的頁面是動(dòng)態(tài)的，比如通過v-for或v-if等來動(dòng)態(tài)渲染的dom,則不適合此方法,可以考慮官方的SSR。

代碼已更新到github，點(diǎn)擊查看

言歸正傳，第一步：安裝prerender-spa-plugin，vue-meta-info

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

如果安裝失敗，使用淘寶鏡像試試

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

第二部：在你的項(xiàng)目目錄下找到該文件 build/webpack.prod.conf.js，添加如下代碼

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

new PrerenderSpaPlugin(
  //將渲染的文件放到dist目錄下
      path.join(__dirname, '../dist'),
      //需要預(yù)渲染的路由信息
      [ '/index','/about' ],
      {
      //在一定時(shí)間后再捕獲頁面信息，使得頁面數(shù)據(jù)信息加載完成
        captureAfterTime: 50000,
        //忽略打包錯(cuò)誤
        ignoreJSErrors: true,
        phantomOptions: '--web-security=false',
        maxAttempts: 10,
      },
    )

至此，你可以打包試試，如果打包后的文件包含index和about兩個(gè)文件，表明成功。

圖片

但是運(yùn)行打包的文件，右鍵查看網(wǎng)頁源代碼，你會(huì)發(fā)現(xiàn)，index和about這兩個(gè)seo的文件信息是一樣的，如果你也是這樣的情況，別急，把你的路由模式換成"history"模式。

圖片

重新打包，運(yùn)行打包文件，查看源代碼，發(fā)現(xiàn)內(nèi)容不一樣了，至此才算成功。

但是會(huì)出現(xiàn)一個(gè)隱形的問題，當(dāng)你打包后的文件部署到線上時(shí)，刷新頁面就會(huì)404了。這時(shí)需要后端配置一下，后端配置

vue-meta-info的具體使用看這里 vue-meta-info