vue-cli3+使用prerender-spa-plugin做预渲染

总结下，一共两种，一种是不带访问前缀的，一种是带的。网上大多数都是默认设置publicPath:'/'，这种随便百度一下都有例子可以成功，比如：无访问前缀的spa-plugins配置

使用有访问前缀的去打包，会有很多坑，比如出现打包一直build没反应，找不到文件，打包后查看html源码都一样等等，经过各种百度和实验下面的配置是完全可以正常打包的。

1.安装spa插件

// 先安装一下插件，因为会安装谷歌的一些东西，所以比较卡顿，耐心等等吧
npm i prerender-spa-plugin -S

2.脚手架的src/main.js配置一下

// 创建vue实例
new Vue({
  router,
  store,
  render: h => h(App),
  mounted() {
    // 这里的render-event是要和下面配置的vue.config.js里该插件声明的保持一致
    document.dispatchEvent(new Event("render-event"));
  }
}).$mount("#app");

3.路由router.js配置一下，需要用history模式，不然hash模式打包后查看html源码都是一样的，不会达到预渲染页面效果

  new Router({
    mode: "history", // 使用history模式，需要设置base路径
    base: process.env.BASE_URL, // 这里使用process获取当前环境的就可以，获取的就是vue.config.js配置的publicPath路径了
  });

4.vue.config.js配置

// require spa plugin
const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

// config
module.exports = {
  publicPath: "/vue_demo", // 如果需要配置访问前缀，需要加上名称
  outputDir: "dist/vue_demo", // 输出目录
  assetsDir: "static",
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        "@": resolve("src")
      }
    },
    plugins:
      // 非development环境，使用spa plugins
      process.env.NODE_ENV !== "development"
        ? [
            new PrerenderSPAPlugin({
              // 生成文件的路径，和webpack配置的保持一致
              staticDir: path.join(__dirname, "dist"),
              // 输出目录，和webpack配置的outputDir保持一致
              outputDir: path.join(__dirname, "dist", "/vue_demo"),
              // 指定入口html，这里必须写，否则打包不了
              indexPath: path.join(
                __dirname,
                "dist",
                "/vue_demo",
                "/index.html"
              ),
              // 需要静态化页面的路由，会生成对应目录的静态文件，如果路由有参数，就需要写成 /home/param1。
              routes: ["/home", "/about"],
              //  配置css压缩，以及移除注释
              minify: {
                minifyCSS: true,
                removeComments: true
              },
              // 这个很重要，如果没有配置这段，也不会进行预编译
              renderer: new Renderer({
                inject: {
                  foo: "bar"
                },
                headless: false,
                // 在 main.js 中实例化vue的mounted，document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                headless: false,
                renderAfterDocumentEvent: "render-event",
                renderAfterTime: 5000 // Wait 5 seconds.
              })
            })
          ]
        : []
  },
}

5.配置完毕打包即可，会生成 dist/vue_demo下生成对应的文件，这种需要访问前缀的，nginx需要配置一下，如下：

访问路径就是: http://localhost/vue_demo/about，http://localhost/vue_demo/home

  location ^~/vue_demo {
      try_files $uri $uri/ /vue_demo/index.html;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $http_host;
      root D:/home/web/;  # 服务器的换成你自己部署的目录
      index index.html index.htm;
    }