npm install prerender-spa-plugin --save
1 vue-config.js中增加
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路徑假丧，也可以與webpakc打包的一致。
// 下面這句話非常重要Ｏ绶丁＞判恪雁乡！
// 這個目錄只能有一級饵史，如果目錄層次大于一級髓抑，在生成的時候不會有任何錯誤提示袋坑，在預渲染的時候只會卡著不動仗处。
staticDir: path.join(__dirname,'dist'),
// 對應自己的路由文件，比如a有參數(shù)枣宫，就需要寫成 /a/param1婆誓。
routes: ['/', '/product','/about'],
// 這個很重要，如果沒有配置這段也颤，也不會進行預編譯
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))洋幻，兩者的事件名稱要對應上。
renderAfterDocumentEvent: 'render-event'
})
}),
],
};
}
}
2 在main.js中增加
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
