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
    }
};
相关推荐
打小就很皮...2 分钟前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
JAVA学习通8 分钟前
OJ竞赛平台----C端题目列表
java·开发语言·jvm·vue.js·elasticsearch
IT_陈寒11 分钟前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit23 分钟前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢24 分钟前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf
执剑、天涯38 分钟前
通过一个typescript的小游戏,使用单元测试实战(二)
javascript·typescript·单元测试
麦麦大数据1 小时前
F025 基于知识图谱图书可视推荐系统 vue+flask+neo4j | python编写、知识图谱可视化+推荐系统
vue.js·python·知识图谱·推荐算法·协同过滤·图书推荐
HHHHHY1 小时前
使用阿里lowcode,手搓一个Carousel 走马灯容器组件
前端·react.js
用户352120195601 小时前
React-router v7
前端
Mintopia1 小时前
⚡ AI 时代,全栈 Next.js 开发的激情在哪里?
前端·aigc·全栈