vue项目seo prerender-spa-plugin

给你取暖

已于 2023-02-22 08:32:59 修改

阅读量202

点赞数

分类专栏： js 文章标签：前端 Powered by 金山文档

于 2023-02-22 08:30:22 首次发布

本文链接：https://blog.csdn.net/weixin_49409651/article/details/129154413

版权

js 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

vue项目seo prerender-spa-plugin


vue.config.js

prerender-spa-plugin

vue-meta-info 



修改部分代码以便于百度seo抓取


  metaInfo: {
    title:   ‘’百度一下‘,
    meta: [
      {
        name: "keywords",
        content: “百度手机电脑”
      },
      {
        name: "description",
        content:”百度”
        
      }
    ]
  },



const PrerenderSPAPlugin = require("prerender-spa-plugin");
const path = require("path");
// 需要后端注入的动态路由
const cdnPath = "$!{staticUrl}/不存在;

module.exports = {
  publicPath: "/",
  outputDir: "不存在",
  lintOnSave: "error",
  productionSourceMap: false,

  // webpack-dev-server 相关配置

  configureWebpack: () => {
    if (process.env.NODE_ENV === "development") {
 
      return;
    }
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, "不存在"),

          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          // 这个很重要，如果没有配置这段，也不会进行预编译
          routes: ["/"],

          postProcess(renderedRoute) {
            // add CDN
            renderedRoute.html = renderedRoute.html
              .replace(
                /(<script[^<>]*src=\")((?!http|https)[^<>\"]*)(\"[^<>]*>[^<>]*<\/script>)/gi,
                `$1${cdnPath}$2$3`
              )
              .replace(
                /(<link[^<>]*href=\")((?!http|https)[^<>\"]*)(\"[^<>]*>)/gi,
                `$1${cdnPath}$2$3`
              );
            return renderedRoute;
          },
          renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
            // inject: {
            //   foo: "bar",
            // },
            injectProperty: "__PRERENDER_INJECTED__",
            inject: "prerender",
            navigationOptions: {
              timeout: 0,
            },
            renderAfterTime: 7000,
            // headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            // renderAfterDocumentEvent: 'render-event'
          }),
        }),
      ],
    };
  },

  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      console.log("development--chainWebpack");
      return;
    }

    config.module
      .rule("images")
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use("url-loader")
  

    config.module
      .rule("svg")
      .test(/\.(svg)(\?.*)?$/)
      .use("file-loader")
    

 
  },
};