Vue项目发布——接口代理

Vue项目采用整站部署，不使用接口所在站点的二级目录或一级目录

目录结构

/webroot/
 ├─ api.app.com/
 │   ├─ public_html/
 │   │   ├─ uploads/
 │   │   └─ web.conf
 │   ├─ certs/
 │   ├─ logs/
 │   └─ rebots.txt
 └─ wechat.app.com/
 　   ├─ public_html/
 　   │   ├─ uploads/    <-- link
 　   │   └─ index.html
 　   ├─ certs/
 　   ├─ logs/
 　   └─ rebots.txt

webpack dev server

/config/index.js:12

// ...
module.exports = {
  dev: {
    // ...
    proxyTable: {
      '/api': {
        target: 'http://apiServer',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/uploads': {
        target: 'http://apiServer',
        changeOrigin: true,
        pathRewrite: {
          '^/uploads': 'uploads'
        }
      }
    }
    // ....
  }
};
// ...

Vue 接口调用

在接口地址前添加“/api”

export const user = {
  login: params => {
    return service
      .post('/api/Sys/SysUser/LoginV2', params)
      .then(res => res.data);
  },
  password: params => {
    return service
      .post('/api/Sys/SysUser/UpdatePwd', params)
      .then(res => res.data);
  }
};
export default {
  user
};

Nginx

server {
  listen 80;
  server_name wechat.app.com;
  location / {
    root /webroot/wechat.app.com/public_html;
  }
  location /api {
    proxy_pass http://apiServer/;
  }
  location /uploads {
    proxy_pass http://apiServer/;
  }
}

Apache

<VirtualHost *:80>
  ServerName wechat.app.com
  DocumentRoot "/webroot/wechat.app.com/public_html"
  <Directory   "/webroot/wechat.app.com/public_html">
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    AllowOverride All
    Require all granted
  </Directory>
  ProxyRequests off
  <Proxy *>  
    Order allow,deny
    Allow from all  
  </Proxy> 
  <Location /api>
    ProxyPass    http://apiServer
    ProxyPassReverse    http://apiServer
  </Location>
  <Location /uploads>
    ProxyPass    http://apiServer
    ProxyPassReverse    http://apiServer
  </Location>
</VirtualHost>

IIS

需要安装ARR（支持IIS7-10，内置 Rewrite）后开启 proxy。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="api" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="http://apiServer/{R:1}" />
        </rule>
        <rule name="uploads">
          <match url="^uploads/(.*)" />
          <action type="Rewrite" url="http://apiServer/{R:0}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

补充

uploads 因为是文件可以使用链接而不使用代理：

ln -s /webroot/api.app.com/public_html/uploads uploads
mklink /d /j uploads E:\webroot\api.app.com\public_html\uploads