vite 预渲染

插件 vite-plugin-prerender

vite-plugin-prerender插件可同时用于vue3和react，安装:

yarn add vite-plugin-prerender -D 
or
npm i vite-plugin-prerender -D

常用配置:

import vitePrerender from 'vite-plugin-prerender';
import path from 'path';
const Renderer = vitePrerender.PuppeteerRenderer;

export default () => {
  return {
    plugins: [
      vitePrerender({
        // 要渲染的路由
        routes: ['/cms/home/index', '/'],
        // 静态文件目录
        staticDir: path.join(__dirname, 'dist'),
        // 是否压缩 HTML 文件
        minify: true,
        // 网络请求失败、404 错误等情况下应该返回的 HTML 文件
        fallback: 'index.html',
        // 渲染时是否显示浏览器窗口，值写false可用于调试
        renderer: new Renderer({
          headless: true,
        }),
      }),
    ],
  }
}

详细配置可去npm查看。

坑

在使用jenkins自动化部署时报错:

Error: Failed to launch chrome!
/data/.jenkins/workspace/ele-cms-new/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory


TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

    at onClose (/data/.jenkins/workspace/ele-cms-new/node_modules/puppeteer/lib/Launcher.js:348:14)
    at Interface.<anonymous> (/data/.jenkins/workspace/ele-cms-new/node_modules/puppeteer/lib/Launcher.js:337:50)
    at Interface.emit (node:events:525:35)
    at Interface.close (node:readline:590:8)
    at Socket.onend (node:readline:280:10)
    at Socket.emit (node:events:525:35)
    at endReadableNT (node:internal/streams/readable:1358:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
[Prerenderer - PuppeteerRenderer] Unable to start Puppeteer
/data/.jenkins/workspace/ele-cms-new/node_modules/@prerenderer/renderer-puppeteer/es6/renderer.js:140
    this._puppeteer.close()
                    ^

TypeError: Cannot read properties of null (reading 'close')
    at PuppeteerRenderer.destroy (/data/.jenkins/workspace/ele-cms-new/node_modules/@prerenderer/renderer-puppeteer/es6/renderer.js:140:21)
    at Prerenderer.destroy (/data/.jenkins/workspace/ele-cms-new/node_modules/@prerenderer/prerenderer/es6/index.js:87:20)
    at /data/.jenkins/workspace/ele-cms-new/node_modules/vite-plugin-prerender/dist/index.cjs:155:25
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
Build step 'Execute shell' marked build as failure
SSH: Current build result is [FAILURE], not going to run.
Finished: FAILURE

其大概意思是你得jenkins环境中找不到chrome，这是需要你在jenkins中进行插件安装:

sudo npm install -g puppeteer --unsafe-perm=true --allow-root

即可,如果还不行，可去此地址进行查找希望此文章对你有用，笔芯。

vite预渲染

vite 预渲染

插件 vite-plugin-prerender

坑