vue2项目运行后,看不到console.log的实际行数

通常是由于 Webpack 或其他构建工具在打包过程中对代码进行了优化和压缩,使得最终生成的代码很难与源代码一一对应。这种情况下,调试信息中可能缺少原始代码的行号和文件名。

解决方法:启用 Source Maps

为了在浏览器控制台中看到更准确的调试信息(包括行号和文件名),你可以启用 Source Maps。Source Maps 允许你在调试时将压缩后的代码映射回原始源代码。

  1. 更新 Webpack 配置
    打开你的 Webpack 配置文件(通常是 webpack.config.js),并添加或修改 devtool 配置项:

    module.exports = {
    // 其他配置项
    devtool: 'source-map', // 添加这一行
    // 其他配置项
    };

  2. 更新 Vue CLI 配置(如果使用 Vue CLI)
    如果你使用的是 Vue CLI,你可以在 vue.config.js 中添加以下配置:

    module.exports = {
    configureWebpack: {
    devtool: 'source-map'
    }
    };

另外一种配置

解决 Webpack < 5 报错

复制代码
npm install node-polyfill-webpack-plugin --save-dev

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
    configureWebpack: (config) => {
        config.plugins.push(
            new NodePolyfillPlugin() // 解决 Webpack < 5 报错
        );
        config.devtool = 'source-map'; // 启用 Source Maps
    }
};
相关推荐
岁岁种桃花儿27 分钟前
Vue核心语法第十一篇:绑定样式
前端·javascript·vue.js
程序员黑豆8 小时前
Java类型推断完全指南:从var到菱形运算符,掌握使用限制与最佳实践
java·前端·ai编程
To_OC9 小时前
踩了个 TS 的坑之后,我终于把 type 和 interface 掰明白了
前端·react.js·typescript
GreenTea9 小时前
深度解读 Anthropic 多智能体报告:更强的模型 ≠ 更好的协调
前端·后端·算法
浮生望9 小时前
前端API工程化:用 Mock 数据与 Axios 配置实现独立于后端的并行开发
前端
万少10 小时前
给 DeepSeek Harness 装个"应用商店":一条命令,595 个插件随你逛
前端·javascript·后端
波波00710 小时前
C# 15 重磅新特性: 带标签 break 与 continue:重新定义嵌套循环控制流
服务器·前端·c#
Brown.alexis11 小时前
es6知识点1-自备使用
前端·ecmascript·es6
小爬的老粉丝12 小时前
JavaScript 纯前端预览 WPS:先识别容器,再路由解析器
前端·javascript·wps