staticDir: path.join(__dirname, './dist/fontend'),
//必需，要渲染的路线。
routes: ['/', '/Pg1', '/Pg2', '/Pg3', '/Pg4'],
//必须，要使用的实际渲染器，没有则不能预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false, //渲染时显示浏览器窗口。对调试很有用。
//等待渲染，直到检测到指定元素。
//例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))`
renderAfterDocumentEvent: "render-event",
renderAfterTime: 5000
})
})
] }
} else {
return;
}
# main.js
new Vue({
router,
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('render-event')) # 新增此句
}
}).$mount('#app')
# router/index.js
import Index from '../views/Index.vue'
import Pg1 from '../views/Pg1.vue'
const routes = [{
path: '/',
name: 'Index',
component: Index, // 不要用懒加载
},
{
path: '/Pg1',
name: 'Pg1',
component: Pg1 // 不要用懒加载
},
{
path: '/Pg2',
name: 'Pg2',
component: () => import('../views/Pg2.vue'), // 可以用懒加载
},
{
path: '/Pg3',
name: 'Pg3',
component: () => import('../views/Pg3.vue'), // 可以用懒加载
},
{
path: '/Pg4',
name: 'Pg4',
component: () => import('../views/Pg4.vue'), // 可以用懒加载
}]
参考链接
[1] vue-cli3.0预渲染 https://www.jianshu.com/p/813c21899540
[2] Unable to prerender all routes! https://github.com/chrisvfritz/prerender-spa-plugin/issues/196
到此这篇关于谈谈我在vue-cli3中用预渲染遇到的坑的文章就介绍到这了,更多相关vue-cli3 预渲染内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
