vue2项目使用预渲染prerender-spa-plugin插件解决seo优化

步骤一：安装prerender-spa-plugin插件

 npm install prerender-spa-plugin -D

步骤二：webpack.prod.conf.js新增以下代码

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = {
    plugins: [new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, '../dist'),​
        // 需要预渲染的路由
        routes: [
          '/',
          '/about',
          '/contact'
        ],
        renderer: new Renderer({
          ignoreJSErrors: true,
          inject: {
            foo: 'bar'
          },
          headless: true, 
          renderAfterTime: 5000
        })
    })]
}

注意事项：很多人会掉入headless的坑，如果设置为false打包的时候会报以下错误！

ERROR in [prerender-spa-plugin] Unable to prerender all routes!

步骤三：打开router/index.js文件修改一下代码

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes,
    // 预渲染，这是重点
    mounted() {
        document.dispatchEvent(new Event('custom-render-trigger'))
    }
});

vue2和vue3的5大不同点介绍

uniapp开发中vue2和vue3的写法有什么区别

标签： prerender-spa-plugin, vue2, vue预渲染

上面是“vue2项目使用预渲染prerender-spa-plugin插件解决seo优化”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_16049.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！