前端炒陈饭 VUE部署到正式环境的配置

老司机炒一炒前端陈饭，关于VUE项目在进行发布到PROD当中的一些配置。

在项目当中，API使用的是另外一个服务器所提供，并且在部署的时候前后端进行的分离部署。

在本地开发的时候，我们会使用到vue.config.js所提供的devServer来进行转发。

  devServer: {
  
    port: 8000,
    proxy: {
      '/api': {
        target: 'https://xxx.cn-beijing.fcapp.run/v1',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
      }
      }
    }
  },

上面代码说明的是如果在我们前端项目所访问的API部分，将会被转发到 'https://xxx.cn-beijing.fcapp.run/v1' 当中。

在本地能够运行的时候，是因为我们本地调试时，在本地启动了一个yarn run serve服务。 由我们本地的机器进行了请求的转发。

但是在我们进行正式环境部署的时候该方法就不起作用了，这里提供了两种方式来解决。

第一种，直接转发，URL当中会直接暴露API服务器的地址。

第二种，和devServer类似的方法，使用Nginx进行请求转发。

先看第一种，为了能够区分development, uat和production 环境，我们可以通过创建不同的.env文件来区分。

.env 文件内容如下：