在项目中使用了vue的预渲染
web
---src
---main.js
---vue.config.js 配置插件
server
---web web项目打包后的静态页面挂载到server的web目录下
项目结构如上
vue.config.js
publicPath: process.env.NODE_ENV === 'production'
? '/'
: '/',
outputDir: path.join(__dirname, '../server/web'),
configureWebpack: config => {
if (ENV === 'production') { // 生产环境下
// 服务器配置预加载
config.plugins.push(new PrerenderSpaPlugin({
staticDir: path.join(__dirname, '../server/web'),
routes: ['/', '/articles/:id', '/hero/:id'], // Required - Routes to render
renderer: new Renderer({
headless: true, // 无头浏览器
renderAfterDocumentEvent: 'render-event',
renderAfterTime: 5000
})
}))
// 不打包第三方包
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios'
}
}
}
main.js中
new Vue({
router,
render: h => h(App),
mounted() {
// 预编译
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
每次npm run build的时候,会报错Unable to prerender all routes!
请问解决了吗?我也遇到这样的问题