webpack配置不同环境域名进行映射访问

前言：

前端开发经常会不同环境进行测试和开发等，如dev和uat的环境数据有差异，或者代码有略微不同，都会导致前端开发在调试不同环境的Bug时可能需要访问不同域名，此时我们可以通过配置webpack.config文件和系统的system的hosts文件进行映射。

 

第一步

在项目代码 build 目录下的 webpack.dev.config.js 配置：

devServer: {
  host: '映射地址',
  por: 'auto',
  hot: true,
  open: true,
  allowedHosts: 'all',
  historyApiFallback: true,
  proxy: proxyConfig
}

　　

第二步

在项目代码 config 目录下的 proxyConfig.js 文件配置：

module.exports = {
    '/api/*': {
        target: '映射地址',
        pathRewrite: {'^/api/':''},
        secure: false,
        changeOrigin: true
      }
    }

　　

第三步

在我的电脑--C:\Windows\System32\drivers\etc 内找到hosts文件，双击打开后添加映射地址：

127.0.0.1 映射地址

　　写完之后保存，再重启项目就可以正常访问了。