vue2预渲染

说明

预渲染可以用来改善少数页面营销seo，加快页面加载速度

预渲染依赖的是prerender-spa-plugin插件

npm install prerender-spa-plugin --save-dev

vue.config.js

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

在plugins下面，找到plugins对象，直接加到上面就行
// 预渲染配置
module.exports = {
    configureWebpack: {
        plugins: [
            new PrerenderSPAPlugin({
                //要求-给的WebPack-输出应用程序的路径预渲染。
                staticDir: path.join(__dirname, 'dist'),
                //必需，要渲染的路线。
                routes: ['/login'],
                //必须，要使用的实际渲染器，没有则不能预编译
                renderer: new Renderer({
                    inject: {
                        foo: 'bar'
                    },
                    headless: false, //渲染时显示浏览器窗口。对调试很有用。  
                    //等待渲染，直到检测到指定元素。
                    //例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
                    renderAfterDocumentEvent: 'render-event'
                })
            })
        ]
    }
}

router.js

const router = new VueRouter({
    // 修改路由模式为history
    mode: 'history',
    routes
})

main.js

mounted () {
    document.dispatchEvent(new Event('render-event'))
 }

这是预渲染的基本配置，npm run build 一下，如果dist文件夹多了你想预渲染的文件夹， 那么恭喜你，成功了！如果项目是用nginx做的代理，nginx还需要做一些配置，具体是：

location = / {
      try_files /home/index.html /index.html;
}

location / {
  try_files $uri $uri/ /index.html;
}