javascript - vue-cli 本地接口转发

问题描述

采用vue-cli构建项目，接口转发如下

proxyTable: { ’/api’: { target: ’http://abcd.com/api’, changeOrigin: true, pathRewrite: {’^/api’: ’’ }} }

在开发环境下，配置了这个，可以解决在开发环境下的跨域请求，那么在生产环境下 通过 npm run build打包之后，这一块的问题vue-cli会自己处理吗？在生产环境下还需要注意什么东西？求大神解答

axios.post(’api/auth/register’, { ’firstname’:this.firstname, ’lastname’:this.lastname, ’email’:this.email, ’password’:this.password, ’password_confirmation’:this.configPassword}).then(function (response) { console.log(response.data);}).catch(function (error) { console.log(error);});

假设请求如上api（生产环境没有跨域），在本地配置接口转发之后可以请求到数据，那么在生产环境应该要怎么样？直接打包之后，将资源放在服务器吗？

问题解答

vue-cli不会帮你处理。。开发环境使用本地代理的接口，生产环境使用正式的接口，这个自己代码里逻辑写好就可以了，根据不同环境调用不同的接口地址

这个是vue-cli对反向代理的一个实现，方便开发环境使用。生产环境中反向代理的方式也有很多：nginx、Apache之类的，如果没有跨域，不需要反向代理的话，就把前端代码直接丢在接口服务器中就行了(tomcat、jboss之类)，但不推荐，静态资源就应该走静态服务器。我们的生产环境是nginx，配置大概是这样的：

server {listen 80;server_name localhost;location / { root /home/project/; index index.html index.htm;}location /api { proxy_pass http://10.0.0.10:8080/api;}}