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

2023-06-28 415 0

我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部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?