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
    }
};
相关推荐
觉醒法师4 分钟前
HarmonyOS开发 - 电商App实例二( 网络请求http)
前端·http·华为·typescript·harmonyos·ark-ts
沈剑心4 分钟前
Kotlin的协程,真能提升编程效率么?
android·前端·kotlin
ZXT15 分钟前
项目精讲 - keepAlive
vue.js
堕落年代15 分钟前
Vue主流的状态保存框架对比
前端·javascript·vue.js
没资格抱怨16 分钟前
el-pagination的使用说明
javascript·vue.js·elementui
沐千熏21 分钟前
Liunx(CentOS-6-x86_64)使用Nginx部署Vue项目
vue.js·nginx·centos
OpenTiny社区25 分钟前
TinyVue的DatePicker 组件支持日期面板单独使用啦!
前端·vue.js
冴羽26 分钟前
Svelte 最新中文文档教程(22)—— Svelte 5 迁移指南
前端·javascript·svelte
树上有只程序猿30 分钟前
Vue3组件通信:多个实战场景,轻松玩转复杂数据流!
前端·vue.js
青红光硫化黑35 分钟前
React基础之useEffect
javascript·react.js·ecmascript