前端项目打包后控制台报错

Question

大家有遇到这种问题吗？要怎么解决呢？
前端项目发完服务后，控制台会报错，页面的操作按钮无法点击，刷新后就好了，但是体验感很差。
我的项目是vue2+webpack4

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你遇到的问题可能是由于webpack4在生产环境下默认启用了productionSourceMap选项，这会导致在控制台中输出大量的错误信息。为了解决这个问题，你可以在webpack.config.js文件中添加以下配置：

module.exports = {
  // ...
  devtool: 'source-map',
  productionSourceMap: false,
};

这将禁用生产环境下的source map功能，从而减少控制台中的错误信息。

如果你想在生产环境下仍然保留source map功能，可以使用hidden-source-map选项：

module.exports = {
  // ...
  devtool: 'hidden-source-map',
};

这将生成source map文件，但是不会在控制台中输出错误信息。

另外，如果你使用的是vue-cli，可以在vue.config.js文件中添加以下配置：

module.exports = {
  // ...
  configureWebpack: {
    devtool: 'source-map',
    productionSourceMap: false,
  },
};

这将在你的项目中应用上述配置。