Vue 3-Nuxt 3 Composable中console.log无输出问题求助

以下是针对你遇到的Composable日志无法输出问题的具体排查方向：

1. 检查运行环境是否为生产模式 #

生产模式下，Vite、Vue CLI等构建工具默认会移除所有console.log以优化代码体积。

• 确认环境：在组件的testComposable函数中添加console.log(import.meta.env.MODE)（Vite）或console.log(process.env.NODE_ENV)（Vue CLI），查看输出是production还是development。
• 解决办法：
  • 临时切换到开发模式运行项目；
  • 若需要在生产模式保留日志，修改构建配置：
    • Vite：在vite.config.ts中配置：

      import { defineConfig } from 'vite'
      import vue from '@vitejs/plugin-vue'
      
      export default defineConfig({
        plugins: [vue()],
        build: {
          minify: 'terser',
          terserOptions: {
            compress: {
              drop_console: false
            }
          }
        }
      })
      

    • Vue CLI：在vue.config.js中配置：

      const TerserPlugin = require('terser-webpack-plugin')
      
      module.exports = {
        configureWebpack: {
          optimization: {
            minimizer: [
              new TerserPlugin({
                terserOptions: {
                  compress: {
                    drop_console: false
                  }
                }
              })
            ]
          }
        }
      }
      

2. 检查浏览器控制台的过滤规则 #

• 确认控制台没有勾选单一过滤选项（如"Errors"、"Warnings"），确保选中"All"；
• 检查搜索框是否输入了关键词，导致日志被过滤；
• 部分浏览器会将日志按脚本分组，展开对应脚本文件的分组查看是否有被隐藏的日志。

3. 验证Composable是否真的被执行 #

有时候导入路径错误或缓存会导致代码未被加载：

• 在useTester函数开头添加throw new Error("Composable loaded")，点击按钮后如果页面报错，说明文件正常加载；
• 若未报错，清除浏览器缓存（Ctrl+Shift+R）或重启开发服务器，确认导入路径是否正确（比如~/composables/test/index.ts的别名是否配置正确）。

4. 检查Vue DevTools的日志隐藏设置 #

Vue DevTools默认可能隐藏组件/Composable的日志：

• 打开Vue DevTools，切换到"Settings"标签；
• 取消勾选"Hide console logs from Vue components"选项。

5. 排查全局日志拦截配置 #

检查项目中是否有全局替换console.log的代码，比如：

• 在main.ts或其他全局脚本中是否有console.log = () => {}这类代码；
• 检查Vite/Vue CLI的define配置，是否有类似globalThis.console.log = undefined的设置。

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