Skip to content

Vue Prerender 预渲染

ps:该插件有性能和维护问题,最新推荐 vite-ssg ——2024-04-10

直接看项目:https://github.com/thiszhong/vue-prerender

Vue cli 搭建,prerender-spa-plugin 进行预渲染,vue-meta 管理/自定义 head 信息 的简单项目模板。

适用于需要 SEO 的站点、活动单页、散页。

可以分项目打包输出,自动生成对应 prerender 路由。

项目结构

...
- prerender-routes
  - generator.js  // 自动根据 src/router/projects 下的路由文件生成预渲染的路由
                  // build 时会执行该文件,如不需要自动生成,移除相关逻辑即可
  - routes.js     // 自动生成的预渲染所需的路由
- src
  - router
    - projects    // 分项目路由,其下文件名称即项目一级路由
      - project-a.js
      - project-b.js
    - routes.js   // 运行时路由
    - index.js
  - views
    - project-a   // 项目1
    - project-b   // 项目2
    - Summary.vue // 项目路由汇总
- vue.config.js   // 预渲染等相关配置、逻辑
...

相关资料