在Vue應用中,SEO優化通常都是采用服務端渲染,我們還有另外一種方式:
使用 vue-meta-info 動態設置title/keword/description 、
具體用法參見文檔:https://github.com/muwoo/vue-meta-info
如果需要根據路由生成純靜態資源,使用 prerender-spa-plugin 可以輕松的添加預渲染
prerender-spa-plugin的使用,基與vue-cli配置:
webpack.prod.conf.js
image.png
//spa 生成靜態
const PrerenderSPAPlugin = require('prerender-spa-plugin')
plugins: [
// 編譯后的html需要存放的路徑
new PrerenderSPAPlugin(
path.join(__dirname, '../docs'),
// 列出哪些路由需要預渲染
['/',
'/main',
'/newsList'
]
),
]