vue单页面做seo处理prerender-spa-plugin预加载

补充：

带参数加seo ，router文件加上动态id
{
    path: "/news-article/:id", //文章详情
    name: "news-article",
    component: () => import("../views/article.vue"),
    meta: {
      title: "",
    },
  },

生成配置加上id配置
// new PrerenderSPAPlugin({
      // // 生成文件的路径，也可以与webpakc打包的一致。
      // // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
      // staticDir: path.join(__dirname, "dist"),
      // // outputDir: path.join(__dirname, './'),
      // // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
      // routes: [
      // "/article/19",
      // "/article/56",
      // "/article/57"
      // ],
      // // 这个很重要，如果没有配置这段，也不会进行预编译
      // renderer: new Renderer({
      // inject: {
      // //默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
      // foo: "bar",
      // },
      // headless: false,
      // // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
      // renderAfterDocumentEvent: "render-event", //等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
      // }),
      // })

原理其实就是预加载，请求服务器某个路径默认会定位到当前下面的xxx/index.html 文件，而这个文件我们利用prerender-spa-plugin插件生成了，当请求某个路由时候，先预加载了这个路由下的index.html界面,然后在服务端控制器响应，完成后合并你的dist/index.html单页面的逻辑 ps:预加载的优势加快页面渲染，缺点不能实时渲染动态数据

prerender-spa-plugin插件分割多个静态界面 vue-meta-info插件 给分割的界面补充keyword等属性

vue.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
一、(http://...) 七牛云路径//publicPath这个路径如果写的七牛等服务器需要将打包后的js传到七牛，不然会一直卡在build状态，因为资源没有加载预览的界面空白，build就不成功卡住不动了
2、('./') 路径//publicPath：如资源放七牛云等服务器，也可以手动将prerender-spa-plugin插件分割的文件引入的css，js资源补全域名
publicPath: process.env.NODE_ENV === "production" ? "./" : "./", 
configureWebpack: {
    plugins: [new PrerenderSPAPlugin({
        // 生成文件的路径，也可以与webpakc打包的一致。
        // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
        staticDir: path.join(__dirname, "dist"),
        // outputDir: path.join(__dirname, './'),
        // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
        routes: [
          "/a",
          "/b",
          "/c",
          "/d",
          "/e",
          "/f",
        ],
        // 这个很重要，如果没有配置这段，也不会进行预编译
        renderer: new Renderer({
          inject: {
            //默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
            foo: "bar",
          },
          headless: false,
          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
          renderAfterDocumentEvent: "render-event", //等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
        }),
      })],
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `js/[name].${Timestamp}.js`,
      chunkFilename: `js/[name].${Timestamp}.js`,
    },
  },

main.js

 mounted() {
   document.dispatchEvent(new Event("render-event"));
 },

page.vue

export default {
 metaInfo: {
   title: 'title',
   meta: [{           
     name: 'keyWords',
     content: 'key'
   },
   {
     name: 'description',
     content: 'desc'
   }], 
 },
 data(){
 	return {}
 }
 ....
}