vue2.0使用预渲染

最新推荐文章于 2023-05-30 16:00:22 发布

原创最新推荐文章于 2023-05-30 16:00:22 发布 · 642 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #预渲染

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue2.0项目中实现预渲染，以提高SEO效果。通过设置history模式，安装并配置prerender-spa-plugin，修改webpack配置，打包后生成静态HTML文件，最后通过本地服务器运行展示预渲染结果，确保爬虫能正确抓取页面内容。

vue2.0使用预渲染

vue是一个单页面的应用，这导致一些爬虫的百度取法搜索到。如果你想针对你引用的其中某些页面进行SEO优化，让他们可以被爬虫和百度搜索到，你可以进行预渲染操作，无需使用web服务器实时动态编译html，只需要在构建的时候简单生成针对特定路由的静态html文件。

1创建一个简单的vue项目

文件目录如下
在这里插入图片描述
运行后如下图：首页的网络请求只有一个，没有对应的文字和组件，不利于SEO

2预渲染的主要步骤

1.router的模式必须是history;
2.核心插件：npm install prerender-spa-plugin -D
3.在 build/webpack.prod.conf.js 内部引入渲染器

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
plugins: [
       new PrerenderSPAPlugin({
        //你存放的静态资源目录
        staticDir:path.join(__dirname,'../dist'),
        //你需要对哪几个路由进行SEO，数组形式，可以多个路由
        routes: ['/','/about'],
        //预编译的重要配置
        renderer:new Renderer({
         inject: {
           foo:'far'
        },
       headless:false,
       //非常重要，文档事件渲染后调用的事件名，在项目的入口中使用
       renderAfterDocumentEvent:'render-event'
    })
})
]

4.在main.js中进行配置

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  }
})

5.打包 npm run build，成功后会发现dist文件下多了一个about文件夹
在这里插入图片描述
6.搭建node本地服务器跑起来或者在线上（后台需要重定向），创建一个node文件夹，里面放server.js文件

server.js

var express = require('express');
var app = express();
app.use(express.static('../dist'));
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
})