Vue-cli使用prerender-spa-plugin插件预渲染

前言：使用vue-cli打包项目一般为spa项目，众所周知单页面应用不利于SEO，有ssr和预渲染两种解决方案，这里我们只讨论预渲染。此教程使用的prerender-spa-plugin版本和vue版本

"prerender-spa-plugin": "^3.4.0",

"vue": "^2.5.17",

vue-cli有2.0和3.0版本，解决方法是不一样的，这里我们要分开讨论。

vue-cli3.0版本

3.0的cli看上去简洁多了，去掉了2.0 build和config等目录，那我们怎么去修改webpack的配置呢？

在根目录下创建vue.config.js，进行你的配置。

1.安装

cnpm install prerender-spa-plugin --save

2.vue-config.js中增加

constPrerenderSPAPlugin =require('prerender-spa-plugin');constRenderer = PrerenderSPAPlugin.PuppeteerRenderer;constpath =require('path');module.exports = {configureWebpack:config=>{if(process.env.NODE_ENV !=='production')return;return{plugins: [newPrerenderSPAPlugin({// 生成文件的路径，也可以与webpakc打包的一致。// 下面这句话非常重要！！！// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。staticDir: path.join(__dirname,'dist'),// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。routes: ['/','/product','/about'],// 这个很重要，如果没有配置这段，也不会进行预编译renderer:newRenderer({inject: {foo:'bar'},headless:false,// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。renderAfterDocumentEvent:'render-event'}) }), ], }; }}

3.在main.js中增加

newVue({ router, store,render:h=>h(App), mounted () {document.dispatchEvent(newEvent('render-event')) }}).$mount('#app')

4.router.js 中设置mode: “history”

5.运行npm run build，看一下生成的 dist 的目录里是不是有每个路由名称对应的文件夹。然后找个目录里的 index.html 用IDE打开，看文件内容里是否有该文件应该有的内容。有的话，就设置成功了，如果没成功，照着上面的步骤再来一次！！！

vue-cli2.0版本

1.安装

cnpm install prerender-spa-plugin --save

2.webpack.prod.conf.js增加部分代码

constpath =require('path')constPrerenderSPAPlugin =require('prerender-spa-plugin')//引用插件constRenderer = PrerenderSPAPlugin.PuppeteerRendererconstwebpackConfig = merge(baseWebpackConfig, {plugins: [// vue-cli生成的配置中就已有这个了，不要动newHtmlWebpackPlugin({filename: config.build.index,template:'index.html',inject:true,minify: {removeComments:true,collapseWhitespace:true,removeAttributeQuotes:true},chunksSortMode:'dependency'}),// 配置PrerenderSPAPluginnewPrerenderSPAPlugin({// 生成文件的路径，也可以与webpakc打包的一致。staticDir: path.join(__dirname,'../dist'),// 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。routes: ['/','/product','/about','/contact','/join','/jzjh'],// 这个很重要，如果没有配置这段，也不会进行预编译renderer:newRenderer({inject: {foo:'bar'},headless:false,// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。renderAfterDocumentEvent:'render-event'}) }) ]})

3.在main.js中增加

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

4.router.js 中设置mode: “history”

特别提醒

1.vue-cli2.0和3.0的设置大致一致，但有一个很不同

在3.0中，设置staticDir: path.join(__dirname,'dist'),

在2.0中，设置staticDir: path.join(__dirname,'../dist'),

如果你把3.0的staticDir设置为path.join(__dirname,'../dist')或者把2.0的staticDir设置为path.join(__dirname,'dist')，运行npm run build 都会报错，这要特别注意！！！

2.细心的小伙伴会发现，不管2.0还是3.0都需要设置 history 模式，那这一步是否是必须的呢？经过测试，如果不设置history模式，其实也能运行和生成文件的，但查看每个index.html文件的内容都会是一样的。所以这一步是必须的

转载：https://www.jianshu.com/p/6a4c0b281e7f

按照以上方法执行后会报错！！！！然后安装上puppeteer 就不会报错了