Vue CLI Prerender是一個能夠對Vue項目進行預渲染的插件。通過預渲染,可以在服務端將Vue組件解析成HTML文檔,并且在第一次請求時直接返回已經渲染好的HTML文檔,從而提高頁面的首屏加載速度和SEO優化效果。
在使用Vue CLI Prerender之前,首先需要安裝該插件。可以通過以下命令進行安裝:
npm install -D prerender-spa-plugin
然后,在Vue項目的配置文件vue.config.js中進行如下配置:
// 引入插件
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports = {
// 配置項
configureWebpack: config =>{
if (process.env.NODE_ENV !== 'production') return // 開發環境不使用該插件
return {
plugins: [
// 使用PrerenderSPAPlugin插件
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/about', '/contact'],
renderAfterDocumentEvent: 'render-event',
renderer: new Renderer({
headless: false,
renderAfterTime: 5000
})
})
]
}
}
}
其中,staticDir為預渲染的HTML文件所在目錄,routes為預渲染的路由,renderAfterDocumentEvent為觸發預渲染的事件,renderer為渲染器的配置。
最后,需要在每個需要預渲染的組件中,添加如下代碼:
mounted() {
document.dispatchEvent(new Event('render-event'))
}
通過以上步驟,就可以實現對Vue項目的預渲染了。