在vue项目中使用prerender-spa-plugin预渲染

一、安装：

npm install prerender-spa-plugin --save

二、路由router模式为 history ：

const router = new VueRouter({
    mode: 'history',
    routes
})

三、配置入口文件 main.js ：

new Vue({
    router,
    render: h => h(App),
    mounted () {
        // document.dispatchEvent(new Event('render-event')) // 预渲染，会报错[prerender-spa-plugin] Unable to prerender all routes!
        document.dispatchEvent(new Event('custom-render-trigger')) // 预渲染，新版本使用这个。
    }
}).$mount('#app')

四、配置 vue.config.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 {
				plugins: [
					// 跟本次无关配置 略 new CompressionPlugin 、 new UglifyJsPlugin ...等等
                    new PrerenderSPAPlugin({
                        // 生成文件的路径，也可以与webpakc打包的一致。
                        staticDir: path.join(__dirname,'dist'),
                        // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                        routes: ['/', '/product', '/about'],
                        // html文件压缩
                        minify: {
                            minifyCSS: true, // css压缩
                            removeComments: true // 移除注释
                        },
                        // 这个很重要，如果没有配置这段，也不会进行预编译
                        renderer: new Renderer({
                            inject: {
                                foo: 'bar'
                            },
                            headless: false,
                            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                            // renderAfterDocumentEvent: 'render-event',    // 会报错 [prerender-spa-plugin] Unable to prerender all routes! 新版不需要这句
                            renderAfterTime: 5000
                        }),
                        
                        postProcessHtml: function (context) {
                        	// 上方配置了3个，这里可以对应添加上
                            var titles = {
                              '/': '江苏 xx 数据科技有限公司',
                              '/product': '无人车 自动驾驶',
                              '/about': '文旅 交通 智慧城市'
                              
                            }
                            return context.html.replace(
                              /<title>[^<]*<\/title>/i,
                              '<title>' + titles[context.route] + '</title>'
                            )
                          }
                    }),
                    
				]

			}
		}
	}
}

打包 npm install build 后，可以看到文件夹中多了 about 和 product两个文件夹：

并且用编译器打开后about 或 product中的 index.html 文件，可以看到 title 部分。

至此，前端部分全部完成。服务器端配置nginx相应的路径即可。