Nginx配置Vue

一、從nginx配置vue項目

在實際的Vue項目中，需要通過配置Nginx服務器來實現項目的部署和訪問。在開始配置前，需要確保已經安裝了Nginx。接下來，可以按照以下步驟進行配置：

1、在Nginx服務器上添加配置文件mysite.conf：

server {  
    listen 80;    
    server_name www.myvue.com;    
    root /path/to/vue_project;    
    index index.html;  
    location / {    
        try_files $uri $uri/ /index.html;    
    }    
}

上面的配置中，服務器監聽80端口，網站域名為www.myvue.com，root為Vue項目的路徑，index為Vue項目中默認的入口文件index.html。location /用來匹配所有URI請求，並指向index.html文件。

2、在/etc/nginx/sites-available中新建mysite.conf軟連接，執行以下命令：

sudo ln -s /etc/nginx/sites-available/mysite.conf /etc/nginx/sites-enabled/

3、檢查Nginx配置文件是否有誤，執行以下命令：

sudo nginx -t

4、重啟Nginx服務，執行以下命令：

sudo service nginx restart

二、Nginx配置Vue的history

當Vue項目採用了history模式時，需要對Nginx進行相應的配置，以便可以正確地進行路由導航。

1、在Nginx配置文件中添加以下配置：

location / {  
    try_files $uri $uri/ /index.html;   
}  

上面的配置用來匹配所有的URI請求，並重定向到主頁index.html。如果重定向失敗，則返回404頁面。

2、重啟Nginx服務，執行以下命令：

sudo service nginx restart

三、Nginx配置Vue路由

除了上面提到的history模式外，Vue項目還可以採用hash模式進行路由。在配置Nginx時，可以根據不同的路由模式進行相應的配置。如果使用hash模式，則無需進行特別的配置，可以按照第一節所述的步驟來進行配置。

四、Nginx配置Vue的代理

在Vue開發中，如果需要對接後端接口，則需要通過代理來進行實現。

1、在Nginx配置文件中添加以下配置：

location /api/ {  
proxy_pass http://localhost:9000/;  
proxy_set_header Host $host;  
proxy_set_header X-Real-IP $remote_addr;  
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
}  

上述配置中的/api/表示匹配帶有/api/前綴的URI請求；proxy_pass http://localhost:9000/表示將請求轉發到localhost:9000地址，即後端接口服務器的地址。

2、重啟Nginx服務，執行以下命令：

sudo service nginx restart

五、Nginx配置Vue反向代理

反向代理是指Nginx服務器作為客戶端向其他服務器發送請求並將其返回結果交給客戶端。在實際的開發中，常常需要將Nginx作為反向代理服務器來進行部署。

1、在Nginx配置文件中添加以下配置：

server {  
    listen 80;    
    server_name www.myvue.com;    
    location / {    
        proxy_pass http://localhost:8000;  
        proxy_set_header Host $host;  
        proxy_set_header X-Real-IP $remote_addr;    
    }    
}

上述配置中的localhost:8000為目標服務器的地址，代表將請求反向代理到該地址。

2、重啟Nginx服務，執行以下命令：

sudo service nginx restart

六、Nginx配置Vue cli

當使用Vue Cli進行項目開發時，需要進行如下的Nginx配置：

1、在Nginx配置文件中添加以下配置：

server {  
    listen 80;    
    server_name www.myvue.com;    
    root /path/to/vue_project/dist;    
    index index.html;  
    location / {    
        try_files $uri $uri/ /index.html;    
    }    
}

上述配置中的root為Vue Cli項目中dist文件夾的路徑，index為Vue項目中默認的入口文件index.html。location /用來匹配所有URI請求，並指向index.html文件。

2、重啟Nginx服務，執行以下命令：

sudo service nginx restart

七、Nginx配置Vue清除前端緩存

在Vue開發中，可能會出現前端緩存問題，可以通過在Nginx配置文件中添加以下配置來解決緩存問題：

location ~* \.(?:css|js)$ {  
    add_header Cache-Control "no-cache, no-store, must-revalidate";  
    add_header Pragma no-cache;  
    expires 0;  
}

上述配置中，使用正則表達式匹配所有的.css和.js文件並添加緩存頭信息，以達到清除緩存的目的。

八、Nginx配置server選取

在多個服務器中，可以通過Nginx進行負載均衡，以實現高可用性和高並發訪問。

1、在Nginx配置文件中添加以下配置：

upstream myapp {  
    server 192.168.1.11;  
    server 192.168.1.12;  
}  
server {  
    listen 80;  
    server_name www.example.com;  
    location / {  
        proxy_pass http://myapp;  
        proxy_set_header Host $host;  
        proxy_set_header X-Real-IP $remote_addr; 
    }  
}  

上述配置中，myapp為服務器組的名稱，包含兩個服務器的IP地址；proxy_pass http://myapp表示將請求轉發給myapp服務器組；proxy_set_header用於設置請求頭。

2、重啟Nginx服務，執行以下命令：

sudo service nginx restart