了解开发环境和生产环境配置

	开发环境（dev-env）	生产环境（prod-env）
目标	面向开发者，方便调试和快速迭代	面向最终用户，追求稳定、高效、安全
代码特性	- 包含调试工具 - 保留注释和详细日志 - 不压缩代码	- 代码压缩混淆 - 移除调试代码 - 开启性能优化
接口请求	指向本地开发服务器或测试接口（如http://localhost:3000/api）	指向正式线上接口（如https://api.example.com）
错误处理	显示详细错误信息（方便定位问题）	隐藏具体错误，显示通用提示（避免泄露敏感信息）
构建速度	更快（无需深度优化）	较慢（需要执行压缩、哈希、CDN 注入等复杂流程）

常见配置场景

1. 接口地址配置

• 开发环境：使用本地代理或测试服务器地址，避免跨域问题。

  // dev.env.js
  module.exports = {
    NODE_ENV: '"development"',
    API_BASE_URL: '"http://localhost:8080/api"' // 本地开发接口
  };

• 生产环境：指向正式线上接口，并关闭代理。
   

  // prod.env.js
  module.exports = {
    NODE_ENV: '"production"',
    API_BASE_URL: '"https://api.example.com"' // 线上接口
  };

• 代码中使用：通过环境变量动态获取地址，避免硬编码。
   

2. 调试工具控制

  开发环境开启，生产环境关闭。

3. 日志和调试信息

• 开发环境：输出详细日志（如请求参数、响应结果）。
   

  if (process.env.NODE_ENV === 'development') {
    console.log('请求参数:', params); // 仅开发环境显示
  }

• 生产环境：移除或简化日志，避免性能损耗和信息泄露。 

  // 生产环境下此代码会被移除
  if (process.env.NODE_ENV === 'production') {
    console.log = () => {}; // 禁用日志
  }

   

4. 性能优化

• 开发环境：关闭代码压缩，加快构建速度。
• 生产环境：启用代码分割（Code Splitting）、缓存哈希（Cache Busting）、CDN 资源加载等优化。
   

  // webpack.prod.conf.js
  module.exports = {
    output: {
      filename: 'js/[name].[chunkhash].js', // 哈希值防止缓存
      chunkFilename: 'js/[name].[chunkhash].js'
    }
  };