VUE配置 - ./my-project/config/index.js

在需要的環境中加入這段程式碼：

 1 dev: {
 2    port: process.env.PORT || 8686,　
 3    proxyTable: {
 4       '/my-sys': {  //代理地址
 5       target: 'http://218.***.***.***:8080/my-sys',  //需要代理的地址
 6       changeOrigin: true,  //是否跨域
 7       secure: false,
 8       pathRewrite: {
 9         '^/my-sys': ''   //本身的介面地址沒有 '/api' 這種通用字首，所以要rewrite，如果本身有則去掉
 
10       },
11       cookiePathRewrite: {
12         '/my-sys': '/'
13       }
14     }
15   }
16 }

行2 是專案執行的本地埠，在Nginx配置中需一致。

行4 是需要代理的地址，使用同等於給變數命名，在Nginx的配置中需要保持一致，才能對該代理地址進行跨域操作。

行5 寫跨域後想操作的介面的地址，就是代理地址。

行9 是有遇到某些專案中會在所有介面地址前加上 ' /api ' ，需要在加上這種通用字首。

Nginx配置 - ./nginx-1.6.0-ems/conf/nginx.conf

 1 #user  nobody;
 

 2 worker_processes  4;
 3 #error_log  logs/error.log;
 4 #error_log  logs/error.log  notice;
 5 #error_log  logs/error.log  info;
 6 
 7 #pid        logs/nginx.pid;
 8 
 9 
10 events {
11     worker_connections  1024;
12 }
13 
14 
15 http {
16     include       mime.types;
17     default_type  application/octet-stream;
 
18 
19     #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
20     #                  '$status $body_bytes_sent "$http_referer" '
21     #                  '"$http_user_agent" "$http_x_forwarded_for"';
22 
23     #access_log  logs/access.log  main;
24 
25     sendfile        on;
26     #tcp_nopush     on;
27 
28     #keepalive_timeout  0;
29     keepalive_timeout  65;
30 
31     #gzip  on;
32     
33     include E:/nginx-1.6.0-ems/conf/my_system_v4.conf;
34 }

行2 工作程序數 預設 - 1，可依據電腦的配置，開工作管理員 -> 效能 看到CPU配置，如電腦是雙核4執行緒CPU，就可以設定為4，啟動Nginx後開啟工作管理員，Nginx共啟動了5個程序，我一直以為應該是4個程序，這裡我也不太清楚為什麼有5個程序，猜測是多出一個主程式程序。

行11單個工作程序可以允許同時建立外部連線的數量，數字越大能同時處理的連線越多，預設 - 1024，如有需要可依據配置調大到 - 100000。worker_connections的配置有兩個指標：

1) 記憶體 - 每個連線分別對應一個read_event、一個write_event事件，兩個事件佔用96位元組，一個連線數大概佔用232位元組，總計328 byte，因此，100k 連線數 * 328 byte / 1024 / 1024 = 31 M，這只是nginx啟動時connections連線數所佔用的。

2) 程序最大可開啟檔案數 - 程序最大可開啟檔案數受限於作業系統，通過 ulimit -n 命令查詢，以前是1024，現在是65535.

行33內檔案的程式碼也可以直接寫在 nginx.conf 中，分開是為了在開發多個專案時通過引入不同檔案能夠快速切換代理連結。

Nginx配置 - ./nginx-1.6.0-ems/conf/my_system_v4.conf

 1 # 負載均衡
 2  upstream my-sys-pool {
 3     server localhost:8787;
 4  }
 5  server {
 6         listen       9920;
 7         server_name  localhost;
 8         client_max_body_size 10m;
 9         location ^~ /saveTemp/ { 
10         proxy_pass http://218.***.***.***:8080;
11         proxy_set_header HOST $host;
12         proxy_set_header X-Real-IP $remote_addr;
13         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
14         proxy_cache_key $host$uri$is_args$args; }
15 
16     # html 
17     location ~ \.(html|gif|jpg|jpeg|png|bmp|swf|eot|svg|ttf|woff|js|css|json|txt|xml|pdf|mp4|mp3)$ { 
18         proxy_pass http://localhost:8686;
19         proxy_set_header X-Real-IP $remote_addr;
20         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
21         proxy_cache_key $host$uri$is_args$args;
22     }
23 
24     location ^~ /my-sys/ {
25         proxy_pass http://218.***.***.***:8080;
26         proxy_set_header HOST $host;
27         proxy_set_header X-Real-IP $remote_addr;
28         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
29         proxy_cache_key $host$uri$is_args$args;
30     }
31 }

行6 是代理成功後的地址，也就是說假設project執行在localhost的8686埠，這時9920應該是無服務專案的，訪問結果是localhost拒絕我們的訪問請求。而8686埠因為請求的是其他伺服器的api，雖然頁面和樣式成功渲染，但api請求一直是pending直到請求超時，通過Nginx成功代理後訪問9920埠則會成功返回呼叫正確介面的project專案。

行9 內程式碼塊作用是重定向本地檔案地址，當頁面請求本地資料夾 /saveTemp目錄中檔案時，重定向至請求218.***.***.***:8080的同路徑檔案。這樣請求的就是伺服器中檔案而不是本地檔案，瀏覽器位址列仍顯示本地 /saveTemp。

行17 作用是將8686埠的檔案（括號中）代理到9920埠可執行。

行24 和Vue中index.js的配置命名一致，將/my-sys這個命名的介面請求代理到http://218.***.***.***:8080.