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

2024年12月07日建站教程

 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'))
    }
});

本文链接：http://so.lmcjl.com/news/19147/

展开阅读全文

上一篇：汕尾住房出租合同简单版2022 下一篇：房屋租赁简易电子合同文本八篇

相关内容

1.帝国cms功能之如何实现自动生成缩略图和自动分

2.帝国CMS怎么解决模板数据的保留问题

3.帝国cmsV6.5之完美解决新增更强大的碎片调用信息

4.帝国CMS6.0如何实现新版结合项功能

5.帝国CMS6.0如何用新版RSS功能

6.帝国cms6.0如何实现标题分类

7.帝国CMS网站管理系统V7.2版数据字典所有数据表解

8.帝国CMS只备份栏目和模板的方法