vue-cli3.0预渲染

1.为什么要预渲染

更好的 SEO，方便爬虫爬取

2.核心插件

npm i prerender-spa-plugin
npm i puppeteer

3.vue.config.js

const webpack = require('webpack');
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            return {
                plugins: [
                    // 预渲染配置
                    new PrerenderSPAPlugin({
                        //要求-给的WebPack-输出应用程序的路径预渲染。
                        staticDir: path.join(__dirname, 'dist'),
                        //必需，要渲染的路由地址。
                        routes: ['/','/us'],
                        //必须，要使用的实际渲染器，没有则不能预编译
                        renderer: new Renderer({
                            inject: {
                                foo: 'bar'
                            },
                            headless: true, //渲染时显示浏览器窗口。对调试很有用（true不显示弹窗，false显示弹窗）。
                            //等待渲染，直到检测到指定元素。
                            //例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))`
                            renderAfterDocumentEvent: 'render-event',
                            
                            //executablePath: '/usr/bin/google-chrome'(chromium执行文件地址)
                        })
                    }),
                ],
            }
        } else {
            // 开发环境的配置
            
        }
    }
};

4.main.js

new Vue({
  router,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

5.router.js 中路由必须设置 mode: “history”模式

6.npm run build 打包，如果生成的 dist 目录里有配置的每个路由名称对应的文件夹，里面的index.html有内容，就代表成功了

7.遇到的问题

1.第一次本地打包之后报错
Chromium revision is not downloaded. Run "npm install" or "yarn install"
发现通过npm i puppeteer安装的Chromium找不到，重试了好几次也不行，当看到Puppeteer Api文档时发现他可以通过设置executablePath来指定Chromium的版本，默认情况下puppeteer会自动下载Chromium保证正常使用，如果找不到路径可以设置executablePath指定路径，路径地址为Chromium可执行文件的路径
2.部署到linux服务器上时提示Chromium文件找不到，于是下载linux版Chromium，重新设置executablePath为linux下Chromium执行文件地址
3.因为刚开始为了本地调试方便将headless设置为false，但linux下没有图形界面，打包时提示打不开Chromium，于是将headless设置为true默认不打开图形界面
4.部署成功以后进网站发现界面能显示出来但事件全部不起作用，打开控制台发现缺少默认绑定ID，于是修改根目录文件加上ID

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

重新部署发现可以正常使用