解决SEO(Search Engine Optimization),首屏问题 , 页面较少，且预渲染相对于SSR比较简单，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，完全可以满足SEO需求。
Prerender服务需要有NodeJs环境支持，如果之前服务器环境没有NodeJs需要先进行安装。
安装
npm install --save prerender-spa-plugin prerender-spa-plugin中有puppeteer
可能会报错
ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA D" env variable to skip download. 此时可以试试淘宝镜像安装
cnpm install --save prerender-spa-plugin puppeteer 因为在执行安装的过程中需要执行install.js，这里会下载Chromium,官网建议是进行跳过，我们可以执行 —ignore-scripts 忽略这个js执行。也可以通过设置环境变量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1阻止下载 Chromium （因为封网，直接下载会失败）
npm i --save puppeteer --ignore-scripts 配置
webpack.base.conf.js
module.exports = { context: path.resolve(__dirname, '../'), //entry: {app: './src/main.js'} entry: { app: ['babel-polyfill','./src/main.js']//babel-polyfill会仿效一个完整的 ES2015+ 环境，并意图运行于一个应用中而不是一个库/工具。 } } webpack.prod.conf.js
开始我这样写
const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径，也可以与webpakc打包的一致。 // 下面这句话非常重要！！！ // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname,'dist'), // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 routes: ['/', '/product','/about'], // 这个很重要，如果没有配置这段，也不会进行预编译 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 () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app') router.js 中设置mode: “history”
运行npm run build，看一下生成的 dist 的目录里是不是有每个路由名称对应的文件夹。然后找个 目录里 的 index.html 用IDE打开，看文件内容里是否有该文件应该有的内容。有的话，就设置成功了，如果没成功，照着上面的步骤再来一次！！！
//比如PrerenderSPAPlugin中的 routes: [ '/','/home/homePage'] 就会生成下面这样的路径 `` bash dist │ ├── home │ │ └── index.html │ ├── homePage │ └── index.html ├── index.html └── static 结合管理头部标签插件vue-meta-info
main.js中加
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo) 页面的vue中加metaInfo信息
export default { metaInfo: { title: 'We Inc', meta: [ { name: 'keywords', content: '关键字1,关键字2,关键字3' }, { name: 'description', content: '这是一段网页的描述' } ] } } 就可以将关键字预渲染到html的页面中去
渲染结束遇到的问题
一、Uncaught ReferenceError: webpackJsonp is not defined
发现是config/index.js
assetsPublicPath: '/', //路径是/不是./ 这里要强调一点如果你的assetsPublicPath设置成’www.xxx.com’，生成的html是没有内容的而且插件vue-meta-info的设置的信息也不会加载出来
二、解决vuex requires a Promise polyfill in this browser问题
添加babel-polyfill插件
webpack.base.conf.js
module.exports = { context: path.resolve(__dirname, '../'), //entry: {app: './src/main.js'} entry: { app: ['babel-polyfill','./src/main.js']//babel-polyfill会仿效一个完整的 ES2015+ 环境，并意图运行于一个应用中而不是一个库/工具。 } } 原文链接：https://www.cnblogs.com/you-uncle/p/13037300.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/20727
