vue.js - nuxt项目首页静态化如何处理?

Question

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

Answer 1

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

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

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

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

Answer 2

试下吧

1. 在nuxt.config.js文件，设置generate.subFolders为false

module.exports = {
  generate: {
    // 生成的静态文件不需要以独立的文件夹形式展示
    subFolders: false
  }
}

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

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

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

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

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

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