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

有骏奇
2023-12-01

总结下,一共两种,一种是不带访问前缀的,一种是带的。网上大多数都是默认设置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;
    }

 

 类似资料: