Vue project development environment proxyTable reverse proxy, the production environment can not find the solution to address the service interface

Scenarios

We will open under vue project development, development environment by proxyTable reverse proxy operation in a local server node, in order to solve the background in the development of environmental services cross-domain issues, but this code is uploaded to the server packaged services URL address will be error, because the server did not help me set up a proxy server in such a production environment.

The reasons of

1. Configuring the reverse proxy

   

2. When using Road King comes ustbhuangyi, but just look at this development environment, production environment, we can not recognize this apis

Solution

(A) is determined by the code development environment or a production environment, and then stitching the URL, the method is relatively cumbersome, requiring code changes

var prodUrl="http://121.115.42.106:8079";
var devUrl="/apis";
var curUrl="";
process.env.NODE_ENV==='development' ? curUrl=devUrl: curUrl=prodUrl;  //这句最重要

this.$axios.get(curUrl+'/handlerPage/GetFTPFilesHandler.ashx', {
  params: {
      XMBH: xmbh
  }
})

(B) to configure Nginx reverse proxy server, this method is a code deployed to our Nginx server, modify our Nginx configuration, the agent on the server, first find our Nginx configuration file, here is my / etc / nginx / sites-enabled / default, different production environment may be different directory, then add the following code in the server configuration file options

Forwarding proxy server is configured in the following location

# Configure proxy forwarding 
LOCATION ^ ~ / ustbhuangyi / {# LOCATION added later matching Road King 
    proxy_pass HTTP: // ustbhuangyi.com/; # proxy_pass disposed forwarding Road King 
} 
LOCATION ^ ~ / HJJ / { 
    proxy_pass HTTP: // 47.95.207.1:3000/; 
}

Note that I visit it nginx address here, ~ (IP + port) / ustbhuangyi request will be forwarded to http://ustbhuangyi.com/ustbhuangyi, because if proxy_pass parameter if the path does not contain the url will the pattern identified location of the path as an absolute path.

After modifying the restart Nginx service, nginx -s reload, so that our nginx can help us to do the agent

(Iii) modify Vue developed profiles

As shown by our built vue init webpack project-name automation project directory where config directory contains profiles of our two production and development environments

                                            

• We can set up different interfaces and addresses dev.env.js in prod.env.js

1. prod.env.js configuration

   var merge = require('webpack-merge')
   var prodEnv = require('./prod.env')
    
   module.exports = merge(prodEnv, {
     NODE_ENV: '"development"',
     API_ROOT: '"//192.168.1.8/api"'     // 配置接口地址
   })

2. dev.env.js configuration

   module.exports = {
     NODE_ENV: '"production"',
     API_ROOT: '"//www.baidu.com/api"'
   }

• In our public api file that is stored in a file interface method calls to configure our API interface address, different people writing is not the same here, if we did not api access method into a file, this will require every a place to call interface to modify the address, it is advisable to visit api operations into one. Then we can address the interface defined above the variable in most of the file

  // Configure Interface Address API 
  var the root = process.env.API_ROOT

  In this way, in a different environment, root points to a different address.

 　Reference document: https://blog.csdn.net/happy81997/article/details/103087530 against the war