最近做項(xiàng)目的時(shí)候候引，被要求做seo耀销，由于項(xiàng)目已經(jīng)開發(fā)完畢淹接，且只需首頁(yè)做seo贞谓，所以考慮再三限佩，決定用prerender-spa-plugin結(jié)合vue-meta-info來(lái)實(shí)現(xiàn)首頁(yè)的seo。
如果你的頁(yè)面是動(dòng)態(tài)的裸弦，比如通過(guò)v-for或v-if等來(lái)動(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í)間后再捕獲頁(yè)面信息砖顷，使得頁(yè)面數(shù)據(jù)信息加載完成
captureAfterTime: 50000,
//忽略打包錯(cuò)誤
ignoreJSErrors: true,
phantomOptions: '--web-security=false',
maxAttempts: 10,
},
)
至此，你可以打包試試赃梧，如果打包后的文件包含index和about兩個(gè)文件滤蝠，表明成功。
但是運(yùn)行打包的文件授嘀，右鍵查看網(wǎng)頁(yè)源代碼几睛，你會(huì)發(fā)現(xiàn)，index和about這兩個(gè)seo的文件信息是一樣的粤攒，如果你也是這樣的情況所森，別急，把你的路由模式換成"history"模式夯接。
重新打包焕济，運(yùn)行打包文件，查看源代碼盔几，發(fā)現(xiàn)內(nèi)容不一樣了晴弃，至此才算成功。
但是會(huì)出現(xiàn)一個(gè)隱形的問(wèn)題逊拍，當(dāng)你打包后的文件部署到線上時(shí)上鞠，刷新頁(yè)面就會(huì)404了。這時(shí)需要后端配置一下芯丧，后端配置
vue-meta-info的具體使用看這里 vue-meta-info
