web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

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

518 ℃
     

步骤一:安装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://ipkd.cn/webs_16049.html

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

当前位置: 网站首页 > vuejs
本文共计741个字,预计阅读时长5分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一个免费、无版权的古典音乐下载的网站——Musopen
下一篇: 推荐一款免费在线图片处理工具——佐糖图片平台
x 打工人ai神器