Vue 2.7+Webpack开发环境调试变量全为undefined/Null问题求助

问题背景 #

我们有一个Vue 2.7单页应用，基于docker-compose环境搭建开发构建环境，目前能正常在.vue组件文件中设置断点（Source Map功能正常），但调试时所有变量均显示为undefined或null。启动开发服务器的命令为：

npm run start -- --port 8000 --host 0.0.0.0

尝试过修改devtool为eval-source-map、移除optimization.minimizer、禁用Terser标识符压缩、删除整个optimization配置等操作，均未改变生成的app.js文件，问题依旧。

核心原因 #

1. 单webpack配置未区分环境，开发模式下强制启用了生产压缩插件：当前webpack.config.js中硬编码了minimizer（包含TerserPlugin和OptimizeCssAssetsPlugin），这些压缩混淆插件会在所有模式下生效，导致开发环境的代码也被变量名混淆，调试时无法匹配原变量。
2. Vue别名指向了生产版压缩文件：resolve.alias中vue$指向vue/dist/vue.runtime.min.js，这是Vue的生产压缩版本，本身就移除了调试相关的变量信息。

解决步骤 #

1. 区分开发/生产环境配置，仅在生产模式启用压缩 #

首先安装cross-env统一环境变量设置（兼容docker及本地不同系统）：

npm install cross-env --save-dev

修改package.json的scripts，明确指定环境变量：

{
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --open --history-api-fallback",
    "build": "cross-env NODE_ENV=production webpack --mode production",
    "webpack": "cross-env NODE_ENV=development webpack --mode=development --watch"
  }
}

修改webpack.config.js，根据环境变量启用压缩插件：

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  // ...其他原有配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/](node_modules)[\\/].+\.js$/,
          name: 'vendor',
        }
      }
    },
    // 仅生产模式启用压缩
    ...(isProduction ? {
      minimizer: [
        new OptimizeCssAssetsPlugin({
          cssProcessorOptions: { map: { inline: false } },
          cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
          },
        }),
        new TerserPlugin({
          extractComments: false,
          terserOptions: {
            output: { comments: false },
          },
        }),
      ]
    } : {})
  },
  // ...其他原有配置
};

2. 修改Vue别名，开发环境使用未压缩版本 #

在webpack.config.js的resolve.alias中，根据环境切换Vue的版本：

resolve: {
  // ...其他原有配置
  alias: {
    '@': path.resolve(__dirname, 'src'),
    layouts: path.resolve(__dirname, 'src/layouts'),
    utils: path.resolve(__dirname, 'src/utils'),
    routes: path.resolve(__dirname, 'src/routes'),
    assets: path.resolve(__dirname, 'src/assets'),
    // 开发环境用未压缩版，生产环境用压缩版
    vue$: isProduction ? 'vue/dist/vue.runtime.min.js' : 'vue/dist/vue.runtime.js'
  },
  // ...其他原有配置
}

3. 清除webpack-dev-server缓存 #

docker环境下可能存在缓存，启动开发服务器时添加--no-cache参数强制清除缓存：

npm run start -- --port 8000 --host 0.0.0.0 --no-cache

或者直接重启docker容器，确保新配置生效。

4. 验证配置生效 #

启动开发服务器后，在浏览器中打开开发者工具，查看app.js的内容：如果代码是未压缩、保留原变量名的状态，说明配置生效，此时调试即可正常访问变量。

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