最近做項目的時候，被要求做seo，由於項目已經開發完畢，且只需首頁做seo，所以考慮再三，決定用prerender-spa-plugin結合vue-meta-info來實現首頁的seo。
如果你的頁面是動態的，比如通過v-for或v-if等來動態渲染的dom,則不適合此方法,可以考慮官方的SSR。
代碼已更新到github，點擊查看
言歸正傳，第一步：安裝prerender-spa-plugin，vue-meta-info
npm install prerender-spa-plugin vue-meta-info --save
如果安裝失敗，使用淘寶鏡像試試
cnpm install prerender-spa-plugin vue-meta-info --save
第二部：在你的項目目錄下找到該文件 build/webpack.prod.conf.js，添加如下代碼
const PrerenderSpaPlugin = require('prerender-spa-plugin') new PrerenderSpaPlugin( //將渲染的文件放到dist目錄下 path.join(__dirname, '../dist'), //需要預渲染的路由信息 [ '/index','/about' ], { //在一定時間后再捕獲頁面信息，使得頁面數據信息加載完成 captureAfterTime: 50000, //忽略打包錯誤 ignoreJSErrors: true, phantomOptions: '--web-security=false', maxAttempts: 10, }, ) 至此，你可以打包試試，如果打包后的文件包含index和about兩個文件，表明成功。
圖片
但是運行打包的文件，右鍵查看網頁源代碼，你會發現，index和about這兩個seo的文件信息是一樣的，如果你也是這樣的情況，別急，把你的路由模式換成"history"模式。
圖片
重新打包，運行打包文件，查看源代碼，發現內容不一樣了，至此才算成功。
但是會出現一個隱形的問題，當你打包后的文件部署到線上時，刷新頁面就會404了。這時需要后端配置一下，后端配置
vue-meta-info的具體使用看這里 vue-meta-info