vue-cli 4.0 3.0预渲染最新完整版 使用prerender-spa-plugin

如果你需要改善少数页面的seo，或者加快少数页面的打开时间。预渲染是个不错的选择。

预渲染相对于服务端 ssr 开发成本 更低，代码 侵入性 更低。

预渲染 插件 prerender-spa-plugin 原理

在 npm run build 将代码打包成功以后，prerender-spa-plugin 插件会在指定目录开启一个服务，使用google开发的无头浏览器 puppeteer 模拟打开打包好的项目，爬取指定的预渲染页面，生成html文件。此时我们访问生成好的html页面就如同访问静态页面一样。

本文运行成功的环境

• node v14.15.0
• vue-cli v4.5.8
• prerender-spa-plugin v3.4.0

期望效果

• 指定页面预渲染成普通html，并和项目spa页面互相访问
• 渲染出来的项目，可随意放在服务器的根目录或者多级目录

项目完整代码请查看 github 的 beforehand 分支

prerender-spa-plugin 的配置和使用

1 安装 prerender-spa-plugin

npm i prerender-spa-plugin -D
or
cnpm i prerender-spa-plugin -D

prerender-spa-plugin 依赖 puppeteer 浏览器，puppeteer较大，若npm安装卡住不动，可先卸载掉 prerender-spa-plugin，使用cnpm重新安装

2 配置 prerender-spa-plugin

// vue.config.js
// 修改资源打包路径
module.exports = {
  productionSourceMap: false,
  publicPath: '/vue/', //资源拼接路径
  outputDir: "dist/vue/", // 打包后输出文件的目录
  assetsDir: "static", //  outputDir的静态资源(js、css、img、fonts)目录

  lintOnSave: true, //是否在保存的时候使用 `eslint-loader` 进行检查。
}

// vue.config.js
// prerender-spa-plugin 插件配置
configureWebpack: config => {
  if (IS_PROD) {
    const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'), // 读取vue-cli已打包文件的根目录 prerender-spa-plugin会在这里开启一个服务
          outputDir: path.join(__dirname, '/dist/vue/'), //经过prerender-spa-plugin处理的文件最终保存的地方
          indexPath: path.join(__dirname, 'dist/vue/index.html'), // 指定入口html
          routes: ['/', '/about'], // 哪些路由页面需要预渲染
          minify: {
            minifyCSS: true, // css压缩
            removeComments: true // 移除注释
          },
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            renderAfterDocumentEvent: 'render-event',
            args: ['--no-sandbox', '--disable-setuid-sandbox']
          })
        })
      ]
    }
  }
}

以上配置在 npm run build 后会打包到 dist/vue/ 目录下，所有的静态资源会拼接上 /vue/ 二级目录。prerender-spa-plugin 插件会读取 dist 目录，经过 prerender-spa-plugin 插件处理的文件也会覆盖放到 dist/vue/ 目录下。

以上配置假定会部署到域名的根目录下。在部署时，直接将 dist 文件夹下的 vue 文件夹放到服务器的根目录下，通过 http://www.xxxxx.com/vue/ 即可访问。

3 抽离打包需要的文件目录
上面配置的打包目录中，dist/vue/ 已被写死，可以把除域名根路径外的路径写成配置文件。

• config文件夹下production和staging两种环境中新增 linkURL部署域名 serverPath多级路径
• prototype.js中，拼接路径，供页面跳转使用
• vue.config.js中 修改build打包路径，修改 prerender-spa-plugin 插件生成文件路径

publicPath: process.env.NODE_ENV == "production" ? "/" + defaultSettings.serverPath : "./", //资源拼接路径  需要判断环境
  outputDir: process.env.NODE_ENV == "production" ? "dist/" + defaultSettings.serverPath : "dist", // 打包后输出文件的目录

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, 'dist'), // 读取vue-cli已打包文件的根目录 prerender-spa-plugin会在这里开启一个服务
  outputDir: path.join(__dirname, '/dist/', defaultSettings.serverPath), //经过prerender-spa-plugin处理的文件最终保存的地方
  indexPath: path.join(__dirname, 'dist/', defaultSettings.serverPath, '/index.html'), // 指定入口html
  routes: ['/', '/about'], // 哪些路由页面需要预渲染
})

以上配置完成后 可随时修改 serverPath多级路径，部署在域名根目录和多级目录都可以。

如果需要部署在根目录，则 serverPath 置为空。打包完成后，将 dist文件夹下所有文件放置在服务器域名根目录下即可。

如果需要部署在多级目录，如http://www.xxxxx.com/aaa/bbb/ccc， 则 serverPath 置为 aaa/bbb/ccc 即可。打包完成后，将 dist文件夹下 aa 文件夹放置在服务器域名根目录下即可。

本项目示例production环境打包后，需放在二级目录访问，http://www.xxxxx.com/vue/

本项目示例staging环境打包后，需放在根目录访问，http://www.xxxxx.com

beforehand分支预渲染功能相对于主分支纯前端渲染，以下文件发生修改

• package.json
• src/components/nav/tabbar.vue
• src/config/env.production.js
• src/config/env.staging.js
• src/main.js
• src/router/index.js
• vue.config.js
• src/plugins/prototype.js

项目完整代码请查看 github 的 beforehand 分支
如果觉得项目对您有帮助的话，github和csdn点个赞呗

vue-cli 4.0 3.0预渲染最新完整版 使用prerender-spa-plugin

微信群大佬都在等着你

微信扫描二维码加入微信群，交流学习，及时获取代码最新动态。