Nuxt 3 如何仅生成当前启用布局对应的样式？

问题根源 #

Nuxt 3默认会预编译layouts目录下的所有组件及其样式，无论当前页面是否使用该布局，导致即使只加载一个布局，另一个布局的样式也会被打包到输出文件中。

解决方案 #

方法1：路由匹配动态导入布局（推荐） #

通过路由规则动态加载对应布局，仅引入当前需要的布局及其样式：

1. 修改app.vue，根据路由路径切换布局：

<script setup>
import { ref, watch } from 'vue'
const route = useRoute()
let layoutComponent = ref(null)

watch(() => route.path, async (newPath) => {
  if (newPath.startsWith('/auth')) {
    layoutComponent.value = (await import('~/layouts/Auth.vue')).default
  } else {
    layoutComponent.value = (await import('~/layouts/Guest.vue')).default
  }
}, { immediate: true })
</script>

<template>
  <component :is="layoutComponent">
    <NuxtPage />
  </component>
</template>

2. 移除所有页面中通过definePageMeta指定的布局配置，避免冲突。

处理后，只有当前路由匹配的布局会被导入，对应的样式也仅在需要时加载，未匹配的布局不会被打包进当前页面资源。

方法2：页面级单独动态导入布局 #

如果需要为单个页面指定专属布局，可直接在页面组件内动态导入：

例如pages/login.vue（使用Auth布局）：

<script setup>
const AuthLayout = (await import('~/layouts/Auth.vue')).default
</script>

<template>
  <AuthLayout>
    <!-- 页面内容 -->
  </AuthLayout>
</template>

pages/index.vue（使用Guest布局）：

<script setup>
const GuestLayout = (await import('~/layouts/Guest.vue')).default
</script>

<template>
  <GuestLayout>
    <!-- 页面内容 -->
  </GuestLayout>
</template>

额外优化：Tailwind CSS 精简配置 #

确保Tailwind仅生成实际使用的样式，在tailwind.config.js中保持正确的扫描范围：

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
  ],
  // 其他Tailwind配置...
}

内容的提问来源于stack exchange，提问作者starter-dev