首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

prerender-spa-plugin白屏解决方案

Sonder
2021-03-17
1075字
3分钟
浏览 (4.8k)

vue.config.js

解决来自:https://github.com/chrisvfritz/prerender-spa-plugin/issues/193

复制代码
configureWebpack: config => {
       return {
           plugins: [
               new PrerenderSPAPlugin({
                   staticDir: path.join(__dirname, 'dist'),
                   outputDir: path.join(__dirname, 'dist/rendered'),
                   renderAfterElementExists: true,
                   postProcess(context) {
                       context.html = context.html.replace('id="app"', 'id="app" data-server-rendered="true"');
                       return context;
                   },
                   captureAfterTime: 50000,
                   routes: ['/'],
                   renderer: new Renderer({
                       renderAfterDocumentEvent: 'render-event'
                   }),
                   headless: false,
               })
           ]
       }
   },

builddist的文件夹里面多了一个rendered

nginx配置

复制代码
# solve white page
location = / {
   try_files $uri /rendered/index.html;
}
image.png

然后重启。

最后,记得要把服务器的dist删除干净在上传新的dist

下一篇 / phpstorm2020.3.1最新破解方法(2021年1月测试可用)

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)