如何解决plugin-vuetify组件Sourcemap缺失警告及页面无法显示问题

问题根源 #

你当前在vite:extendConfig钩子中手动添加vuetify插件的方式，会与Nuxt官方的@nuxtjs/vuetify模块产生冲突，导致样式处理逻辑混乱，引发sourcemap指向缺失文件的警告，最终造成页面无法正常渲染。

正确配置方式 #

放弃手动注入Vuetify插件的操作，改用Nuxt Vuetify模块的官方配置来指定自定义样式文件：

1. 修改nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/vuetify'],
  vuetify: {
    styles: {
      configFile: 'assets/main.scss'
    }
  }
})

2. 规范assets/main.scss内容
   自定义样式文件需遵循Vuetify变量覆盖的规范，示例如下：

// 导入Vuetify基础样式变量
@import 'vuetify/styles';

// 覆盖目标变量
$primary: #1976D2;
$secondary: #424242;
$accent: #82B1FF;

// 加载Vuetify样式
@use 'vuetify' with (
  $color-pack: false,
  $utilities: false
);

额外排查步骤 #

• 清理项目缓存：删除node_modules、.nuxt、dist文件夹，重新执行npm install和npm run dev
• 确认依赖完整性：确保已安装sass（Vuetify依赖Sass预处理器）
• 检查样式文件语法：确认assets/main.scss无语法错误，比如未正确导入Vuetify样式或变量定义错误

关于已提交的Issue #

你在Vuetify Loader仓库提交的Issue指向了插件冲突引发的sourcemap问题，采用上述配置后该警告应自动消失；若问题仍存在，可在Issue中补充正确配置后的复现信息。

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