Vue环境变量在Chrome调试器中明文显示，如何实现混淆？

方法1：字符串编码混淆（简单快速） #

这种方式并非加密，仅能让变量值不直接以明文形式出现在打包代码中，适合非高度敏感场景：

• 将环境变量值用Base64编码，比如你的https://ms-brick.loc:31060/api编码后为aHR0cHM6Ly9tcy1icmljay5sb2M6MzEwNjAvYXBp
• 在.env.production中配置：VUE_APP_URL_API=aHR0cHM6Ly9tcy1icmljay5sb2M6MzEwNjAvYXBp
• 代码中使用时解码：

const apiUrl = atob(process.env.VUE_APP_URL_API);
// 后续用apiUrl发起请求

方法2：增强Webpack混淆配置 #

Vue CLI默认用terser-webpack-plugin做代码压缩混淆，你可以在vue.config.js中配置更严格的规则，让字符串和变量名更难被识别：

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new require('terser-webpack-plugin')({
          terserOptions: {
            mangle: {
              // 开启顶层变量名混淆
              toplevel: true,
            },
            compress: {
              // 移除console及冗余代码
              drop_console: true,
              pure_funcs: ['console.log'],
              // 多轮压缩优化
              passes: 3,
            },
            output: {
              // 移除所有注释
              comments: false,
              // 启用ASCII格式输出，弱化字符串可读性
              ascii_only: true,
            },
          },
        }),
      ],
    },
  },
};

注意：开启字符串混淆后需充分测试，避免破坏业务逻辑。

方法3：后端代理（最安全方案） #

如果API URL属于敏感信息，最彻底的方式是通过后端转发请求，前端仅请求相对路径：

• 开发环境：在vue.config.js中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://ms-brick.loc:31060/api',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

• 生产环境：用Nginx或其他服务器配置反向代理，前端请求/api时，服务器自动转发到真实API地址。此方式下打包后的代码中完全不会出现真实API URL。

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