[TOC] [参考](https://juejin.im/post/5c2ec4316fb9a04a03795949) ## 安装 `cnpm install prerender-spa-plugin --save-dev` ## 配置 `vue.config.js` ``` const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { configureWebpack: () => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。 // 下面这句话非常重要!!! // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, 'dist'), // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。 routes: ['/', '/Login', '/Home'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }) ] }; }, } ``` `main.js` ``` new Vue({ router, store, render: (h) => h(App), // 添加mounted,不然不会执行预编译 mounted() { document.dispatchEvent(new Event('render-event')); } }).$mount('#app'); ``` ## 编译 `npm run build ` 编译后会在 dist 中生成一些指定router 的文件