nuxt2项目首页静态化如何处理?

  • Z时代
  • 2024-02-04
  • 分类：IT

我nuxt项目是npm run build 打包的, 使用ssr,
在生产环境中,发现首页负载高,想解决首页负载高的问题,能否使用首页静态化
如何实现首页 自动 静态化呢?
首页静态化又如何 部署 ?
使用的nuxt是2版本

回答：

试下吧

  1. 在nuxt.config.js文件，设置generate.subFolders为false
module.exports = {
  generate: {
    // 生成的静态文件不需要以独立的文件夹形式展示
    subFolders: false
  }
}

  1. 在asyncData或fetch生命周期函数中获取数据

    export default {
     // 确保这些生命周期函数中的代码不会影响到静态化页面的渲染
      asyncData ({ store, params }) {
     return store.dispatch('getHomepageData')
      }
    }

  2. 在mounted生命周期函数中，使用this.$nuxt.generate()方法生成静态网页。

    export default {
      mounted () {
     this.$nuxt.generate({
       route: '/'
     })
      }
    }

    要把项目部署到生产环境时，npm run generate 生成静态页面。部署时把静态页面上传到服务器

自动化部署，可以用 CI/CD

回答：

仔细看文档，官方文档有说过 Hybrid Rendering

export default defineNuxtConfig({
  routeRules: {
    // Homepage pre-rendered at build time
    // 首页在构建期间预渲染
    '/': { prerender: true },
  }
})

渲染模式这一章建议好好看看，Nuxt 与 Vue 最大的区别就在这里。

另外建议经常性把官方文档从头到尾看一遍。

以上是 nuxt2项目首页静态化如何处理? 的全部内容， 来源链接： utcz.com/p/934496.html

回到顶部