Nuxt项目中Vuetify的v-text-field默认样式渲染异常问题

在Nuxt项目中使用Vuetify开发时编写了如下组件代码：

<div class="cd-page__details-wrapper">
  <v-text-field
    label="Outlined"
    placeholder="Outlined"
    outlined
  ></v-text-field>
</div>

组件实际渲染出现严重样式错乱，异常效果截图：

项目nuxt.config.js中的buildModules配置如下：

buildModules: [
  '@nuxtjs/dotenv',
  '@nuxtjs/vuetify',
],

已按照官方指引引入@nuxtjs/vuetify模块，未做额外样式相关自定义配置，需要解决该样式异常问题。

按优先级依次排查以下问题即可解决：

• 确认根布局已包裹<v-app>组件
  Vuetify 所有功能组件必须嵌套在<v-app>根组件内部，才能正常加载全局样式重置、主题变量、布局基线逻辑，这是该类异常最常见的诱因。打开项目的layouts/default.vue文件，确保模板最外层用<v-app>包裹所有路由内容、导航、页脚等元素，参考结构：

  <template>
    <v-app>
      <!-- 导航栏、侧边栏等全局组件 -->
      <Nuxt />
      <!-- 页脚等全局组件 -->
    </v-app>
  </template>
  

• 核对模块与Nuxt大版本兼容性
  Nuxt 2项目需对应使用@nuxtjs/vuetify@1.x版本，Nuxt 3项目需对应使用@nuxtjs/vuetify@2.x及以上版本，版本不匹配会直接导致样式注入逻辑失效。可在package.json中核对版本号，版本不符时卸载重装对应适配版本即可。
• 清除构建缓存后重启服务
  模块初次加载异常可能导致构建缓存写入错误的样式产物，停止本地开发服务后，删除项目根目录下的.nuxt缓存目录、node_modules/.cache目录，重新启动开发服务即可：

  rm -rf .nuxt node_modules/.cache
  npm run dev
  

• 显式补充Vuetify配置避免treeShaking漏载
  以上操作无效时，可在nuxt.config.js中新增vuetify配置项，显式指定默认资源加载规则、关闭异常treeShaking逻辑：

  buildModules: [
    '@nuxtjs/dotenv',
    '@nuxtjs/vuetify',
  ],
  vuetify: {
    customVariables: [],
    treeshake: false,
    defaultAssets: {
      font: true,
      icons: 'mdi'
    }
  }
  

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