如何在自定义Nuxt模块中设置loadingTemplate

你可以通过以下两种可靠方式在Nuxt模块中配置自定义loadingTemplate：

方法一：直接修改Nuxt配置的devServer选项 #

在模块的setup阶段直接修改nuxt.options.devServer，确保保留原有配置的同时覆盖loadingTemplate：

import { loadingTemplate } from './loadingTemplate'

export default defineNuxtModule<ModuleOptions>({
  // 填写你的模块元数据（如name、configKey等）
  setup(options, nuxt) {
    // 确保devServer对象存在，避免覆盖时丢失默认配置
    nuxt.options.devServer = nuxt.options.devServer || {}
    nuxt.options.devServer.loadingTemplate = loadingTemplate
  }
})

方法二：通过Nitro配置钩子修改（更推荐） #

由于Nuxt的devServer最终由Nitro负责管理，在nitro:config钩子中修改配置能确保生效时机正确：

import { loadingTemplate } from './loadingTemplate'

export default defineNuxtModule<ModuleOptions>({
  // 填写你的模块元数据
  setup(options, nuxt) {
    nuxt.hook('nitro:config', (nitroConfig) => {
      nitroConfig.devServer = nitroConfig.devServer || {}
      nitroConfig.devServer.loadingTemplate = loadingTemplate
    })
  }
})

为什么你之前的方法无效？ #

• 直接覆盖整个nuxt.options.devServer时，如果原配置为undefined，展开操作会生成空对象，丢失Nuxt默认的devServer配置，导致加载逻辑异常。
• 使用ready、listen等钩子时机太晚，此时devServer已经完成初始化，修改配置无法被应用。

内容的提问来源于stack exchange，提问作者SergkeiM