其他分享
首页 > 其他分享> > prerender-spa-plugin使用

prerender-spa-plugin使用

作者:互联网

要点提示

前提:prerender-spa-plugin只能渲染静态页面的内容,别指望渲染动态从数据库那获取的内容,大坑,我才晓得

使用这个多半是为了加快网站访问速度和进行seo优化

预渲染优势

访问速度加快:你正常打包出来的文件如下,只有一个html,其他的页面需要在打开这个html后渲染,这就需要花时间

如果是 用了预渲染打包出来的页面如下,可以看到有很多个html文件,这些html文件都可以打开

 seo优化

这个需要配合vue-meta-info插件,改变link、title、meta

我有一篇文章里面介绍了这个插件

https://blog.csdn.net/qq_59068750/article/details/122491545?spm=1001.2014.3001.5502

如何在vue页面中使用

安装插件

 npm install prerender-spa-plugin

在config/index.js文件中找build标签,修改以下内容

   index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

在main.js中修改以下代码

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

 在webpack.prod.conf.js添加代码

 注意!这里跟别人不一样的就是 这个我去掉了  headless: false,

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


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

      })

    }),

]

配置结束,npm run build即可

 

 

标签:prerender,渲染,plugin,html,new,spa
来源: https://blog.csdn.net/qq_59068750/article/details/122783152