欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue-cli单页面预渲染seo-prerender-spa-plugin操作

程序员文章站 2022-06-16 20:01:21
1 vue-cli-plugin-prerender-spa使用方法:vue add prerender-spa在安装的过程中会需要安装一个chrome,网速不好可能导致不能下载,导致安装失败,可以取...

1 vue-cli-plugin-prerender-spa

使用方法:

vue add prerender-spa

在安装的过程中会需要安装一个chrome,网速不好可能导致不能下载,导致安装失败,可以取消chrome的安装,然后手动下载放在指定的目录下;

安装过程中选择需要预渲染的route

vue-cli单页面预渲染seo-prerender-spa-plugin操作

安装成功:

vue-cli单页面预渲染seo-prerender-spa-plugin操作

自动在main.js中加入:

vue-cli单页面预渲染seo-prerender-spa-plugin操作

2 使用prerender-spa-plugin插件

cnpm i prerender-spa-plugin --save-dev

vue-cli2.0 在build/webpack.prod.conf.js中:

const prerenderspaplugin = require('prerender-spa-plugin')

const renderer = prerenderspaplugin.puppeteerrenderer

注册插件:

在plugins中加入:

new prerenderspaplugin({
  staticdir: path.join(__dirname, '../dist'),//打包文件的路径,或者自定义一个文件路径
  routes: ['/test', '/'],//需要预渲染的route路径
  renderer: new renderer({
  inject: {
   foo: 'bar'
  },
  headless: true,
  renderafterdocumentevent: 'render-event'//需要在实例化vue中监听的事件,名称要相对应
  })
 })

vue-cli3.0

在vue.config.js

const prerenderspaplugin = require('prerender-spa-plugin');
const renderer = prerenderspaplugin.puppeteerrenderer;
const path = require('path');
module.exports = {
 configurewebpack: config => {
 if (process.env.node_env !== 'production') return;
 return {
  plugins: [
  new prerenderspaplugin({
   // 生成文件的路径,也可以与webpakc打包的一致。
   // 下面这句话非常重要!!!
   // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
   staticdir: path.join(__dirname,'dist'),
   // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
   routes: ['/', '/product','/about'],
   // 这个很重要,如果没有配置这段,也不会进行预编译
   renderer: new renderer({
   inject: {
    foo: 'bar'
   },
   headless: false,
   // 在 main.js 中 document.dispatchevent(new event('render-event')),两者的事件名称要对应上。
   renderafterdocumentevent: 'render-event'
   })
  }),
  ],
 };
 }
}

在main.js中加入:

new vue({
 el: '#app',
 router,
 components: { app },
 template: '<app/>',
 mounted() {
 // you'll need this for renderafterdocumentevent.
 document.dispatchevent(new event('render-event'))
 }
})

以上这篇vue-cli单页面预渲染seo-prerender-spa-plugin操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。