开发总结：vue预渲染总结与闭坑

安装 prerender-spa-plugin

npm install --save prerender-spa-plugin

prerender-spa-plugin中有puppeteer
可能会报错

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.

此时可以试试淘宝镜像安装

cnpm install --save prerender-spa-plugin

因为在执行安装的过程中需要执行install.js，这里会下载Chromium,官网建议是进行跳过，我们可以执行 —ignore-scripts 忽略这个js执行。也可以通过设置环境变量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1阻止下载 Chromium （因为封网，直接下载会失败）

npm i --save puppeteer --ignore-scripts

然后手动下载Chromium
解压到你当前项目中的node_modules/puppeteer/.local-chromium/mac-571375下就可以了

项目中开始配置

预渲染一定要把路由模式变成history模式

const router = new Router({
  mode: 'history', // 预渲染一定要模式改成history
  routes: baseRoute
})

webpack.prod.conf.js文件：

调用渲染器：

const PrerenderSPAPlugin = require('prerender-spa-plugin')
// 调用渲染器
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

预渲染器插件的配置

    // 预渲染器插件的配置
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, '../dist'),
      routes: ['/', '/index', '/aboutUs'],
      // 这个配置很重要，如果没有这个配置，也不会进行编译
      renderer: new Renderer({
        // 是否打开浏览器，false 是打开。可用于 debug 检查渲染结果
        headless: false,
        // 在项目的入口使用document.dispatchEvent(new Event('render-event'))
        // 这句话会报错building for production...[prerender-spa-plugin] Unable to prerender all routes!
        renderAfterElementExists: 'render-event',
        // 这样写renderAfterTime生效了
        renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
          renderAfterTime: 5000
        })
      })
    })

结果报错 ：building for production...[prerender-spa-plugin] Unable to prerender all routes! UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Navigation Timeout Exceeded: 30000ms exceededrender AfterTime: 5000

需要把“renderAfterElementExists: 'render-event',”注释掉

    // 预渲染器插件的配置
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, '../dist'),
      routes: ['/', '/index', '/aboutUs'],
      // 这个配置很重要，如果没有这个配置，也不会进行编译
      renderer: new Renderer({
        // 是否打开浏览器，false 是打开。可用于 debug 检查渲染结果
        headless: false,
        // 在项目的入口使用document.dispatchEvent(new Event('render-event'))
        // 这句话会报错building for production...[prerender-spa-plugin] Unable to prerender all routes!
        // renderAfterElementExists: 'render-event',
        // 这样写renderAfterTime生效了
        renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
          renderAfterTime: 5000
        })
      })
    })

在项目的入口文件main.js中写入

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>',
    /* 这句非常重要，否则预渲染将不会启动 */
    mounted () {
      document.dispatchEvent(new Event('render-event'))
    }
})

最好修改config/index.js 中的build部分的 assetsPublicPath: '/',

build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
 
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        ....

因为我们是把打包发布后的程序放在了根目录下，所以base 和 assetsPublicPath 都写了 / ,如果网站访问形式是 http://www.XXX.com/web ,则需要把 / 该为 /web/ ,否则访问不到内容

进行编译运行

 npm run build

编译之后的效果

在浏览器上运行看看

hs -o -p 999

在network上看下运行的页面中div是否有可seo的内容出现