web前端开发项目走proxy代理后端接口，构建发布到生产等环境后，如何修改api接口

一、开发环境（development）现状

在开发环境，因为本地站点和接口站点不是同一个域名，就产生了跨域问题，但是不可能让后端开发跨域端口或使用jsonp，所以，一般是让前端通过在webpack.config.js中配置proxy来走接口代理。

代码如下：

module.exports = {
  dev: {
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/api": {
        target: "http://192.168.100.121:31401/webapi", // 研发测试地址
        changeOrigin: true,
        //secure: false, //接受运行在https上的服务
        pathRewrite: {
          "^/api": ""
        }
      }
    },
    host: "localhost", // can be overwritten by process.env.HOST
    port: 8082, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: false,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
  }

这样，就将本地域名代理到接口了。

二、构建后的接口映射或变更（生产环境-production）

构建成dist目录后，就不能修改前端代码了，虽然可以在外面新建一个配置文件来更换接口，但是这种外挂的方式还是不太方便，最好就是dist后可以被打包为docker镜像或者发布到服务器都不需要配置端口。

也就是我们在开发时，就需要考虑这个问题，将端口地址设置好，而不是事后修改。

而且构建后端口就不会走代理访问了，是直连，意味着不存在跨域问题。

所以在前端接口中，应该是写相对路径。

三、如何实现开发和生产版本的接口地址变更

其实也容易，通过if语句判断当前环境，然后启用不同的端口地址即可。

关键代码如下：

1、在main.js中判断环境

if (process.env.NODE_ENV == "development") {
  //开发环境
  Vue.prototype.$baseUrl = process.env.baseUrl + process.env.BASE_API;
  //以上两个变量的值
} else {
  //生产环境
  Vue.prototype.$baseUrl = process.env.BASE_API;
}

其中以上process.env.baseUrl 和process.env.BASE_API这两个环境变量的值，是在config/prod.env.js和config/dev.env.js中配置的，这两个环境的配置文件最终会合并到configindex.js来。

2、dev.env.js的配置代码

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API:'"/api"',
  baseUrl:'"http://'+config.dev.host+':'+ config.dev.port +'"'
})

3、prod.env.js的配置代码

module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"/webapi"',
}

其中config.dev.host的值是localhost，config.dev.port的值是8082，他们是在开头的webpack.config.js配置的。

所以，main.js中的if语句的环境变量的值就是来自于这里，很明显的看到在生产环境中，是没有配置域名，只是配置了相对路径，这样在构建后，他们没有跨域，自然就能正常访问后端接口。

这样就实现了题目所表示的不同环境用不同后端接口的问题。

如果你对web前端开发、面试感兴趣的话可以加V：imqdcnn。群里有各种学习资源发放，免费答疑，更有行业深潜多年的技术牛人分析讲解。

祝你能成为一名优秀的WEB前端开发工程师！

代码007普通

打赏 收藏 海报 链接