Nuxt3+Webpack项目Chrome DevTools无法加载部分JS文件求助

问题原因分析 #

• Webpack钩子配置错误：你当前在hooks.webpack下直接嵌套module、plugins的写法不符合Nuxt 3的规范，这种错误配置会导致Webpack模块解析逻辑混乱，进而引发源文件加载失败。
• 重复注册插件：VueLoaderPlugin已经由Nuxt内部自动注册，手动重复添加会破坏Webpack的正常工作流程；VuetifyPlugin也不应直接在Webpack配置中手动添加，需通过官方Nuxt模块集成。
• Devtool配置不匹配：开发环境下使用生产环境的source-map，会导致Chrome DevTools无法正确解析webpack://协议的源文件路径。

修正后的Nuxt配置 #

export default defineNuxtConfig({
  builder: 'webpack',
  typescript: { shim: false },
  build: {
    // 开发环境使用更适配的devtool，解决webpack://协议解析问题
    devtool: process.env.NODE_ENV === 'development' ? 'eval-cheap-module-source-map' : 'source-map',
    transpile: ["vuetify"],
  },
  devtools: { enabled: true },
  modules: [
    '@nuxt/image',
    // 通过官方模块集成Vuetify，自动处理Webpack配置
    '@vuetify/nuxt-module'
  ],
  hooks: {
    // 正确修改Webpack配置的方式：使用webpack:config钩子
    'webpack:config'(configs) {
      // 若需额外调整Webpack配置，在此处操作（无需手动添加VueLoaderPlugin）
      configs.forEach(config => {
        // 示例：可在此添加自定义模块规则或插件
      })
    }
  }
})

额外修复步骤 #

• 清理项目缓存：删除.nuxt目录、node_modules和锁文件，重新安装依赖并启动项目：

rm -rf .nuxt node_modules package-lock.json
npm install
npm run dev

• 检查DevTools设置：打开Chrome DevTools的设置 > 实验面板，确保启用Webpack调试相关选项；同时在Sources面板中勾选启用JavaScript源映射。
• 确认Vuetify集成：确保通过@vuetify/nuxt-module集成Vuetify，不要手动在Webpack配置中添加VuetifyPlugin，官方模块会自动处理所有相关配置。

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