Nginx配置Vue項目

一、Nginx配置Vue項目代理

在開發Vue項目時，經常需要與後端服務器進行交互，但由於Vue是一個前端框架，需要將請求發送到後端服務器，Nginx就可以來充當代理服務器。

以下是一個簡單的 Nginx 配置，將請求代理到後端服務器的示例：

server {
    listen 80;
    server_name example.com;

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

其中，

• listen表示監聽的端口號。
• server_name表示服務的域名，如果需要，可以用通配符（例如*.example.com）。
• location表示後端服務器的 API 路徑（一般以 /api/ 開頭）。
• proxy_pass表示後端服務器的地址和端口號。
• proxy_set_header用於設置頭部信息，這裡是設置 Host、X-Real-IP 和 X-Forwarded-For。

二、Nginx配置Vue項目刷新動態路由500問題

在使用 Vue-router 開啟了 HTML5 History 模式後，刷新頁面會返回 404 或 500 錯誤碼。這是因為當瀏覽器通過地址訪問服務端時，服務端並沒有對應的路由，所以會返回錯誤。解決辦法是使用 Nginx 的 try_files 指令。

以下是一個簡單的 Nginx 配置：

server {
    listen 80;
    server_name example.com;

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

其中，try_files $uri $uri/ /index.html; 就是用於解決 404 或 500 錯誤的指令。

三、Nginx配置Vue項目代理失效

在配置 Nginx 代理時，有時會出現代理失效的問題。這通常是由於 Nginx 緩存造成的。解決辦法是使用 Nginx 的 proxy_cache_bypass 指令。

以下是一個簡單的 Nginx 配置：

proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=my_cache:10m inactive=60m;
proxy_cache_key "$scheme$request_method$host$request_uri";
server {
    listen 80;
    server_name example.com;

    location /api/ {
        proxy_pass http://your_backend_server:port/;
        proxy_cache my_cache;
        proxy_cache_valid any 5m;
        proxy_cache_bypass $http_cache_control;
        add_header X-Cache-Status $upstream_cache_status;
    }
}

其中，proxy_cache my_cache;表示啟用緩存，proxy_cache_bypass $http_cache_control;表示繞過緩存。同時，通過添加 X-Cache-Status 頭部可以方便地查看緩存狀態。

四、Nginx代理Vue項目

在將 Vue 項目部署到生產環境時，通常需要使用 Nginx 充當 Web 服務器，可以通過以下配置實現：

server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/your/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

其中，root /path/to/your/dist;表示打包好的 Vue 項目的文件夾路徑，try_files $uri $uri/ /index.html;用於解決刷新動態路由問題。

五、Nginx部署Vue項目後端地址

在開發時，前端通常使用相對路徑跟後端進行交互，但在生產環境中，通常需要使用絕對路徑。可以將後端地址配置到 Nginx 中：

server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/your/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
        add_header Access-Control-Allow-Origin your_backend_server;
    }
}

其中，add_header Access-Control-Allow-Origin your_backend_server;表示允許跨域訪問後端服務器。

六、Vue history Nginx配置

使用 Vue-router 中的 History 模式時，需要將所有路由都指向 index.html 文件。可以使用以下配置實現：

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

七、Linux部署Vue項目

在 Linux 服務器上部署 Vue 項目，需要先安裝 Node.js 和 Nginx。

以下是部署步驟：

1. 安裝 Node.js
2. 使用 npm 安裝 Vue CLI
3. 使用 Vue CLI 創建項目
4. 打包靜態資源
5. 將打包好的文件上傳到服務器
6. 在 Nginx 中配置項目
7. 重啟 Nginx

八、Nginx靜態資源配置

可以使用以下配置來配置 Nginx 靜態資源：

server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/your/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
        add_header Access-Control-Allow-Origin your_backend_server;
    }

    location /img/ {
        root /path/to/your/static;
        expires 1d; 
        add_header Cache-Control "public"; 
    }

    location /js/ {
        root /path/to/your/static;
        expires 1d; 
        add_header Cache-Control "public"; 
    }

    location /css/ {
        root /path/to/your/static;
        expires 1d; 
        add_header Cache-Control "public"; 
    }
}

其中，location /img/ {...}、location /js/ {...}、location /css/ {...}分別表示靜態資源的路徑，expires 1d;表示靜態資源緩存時間為一天，add_header Cache-Control "public";表示允許緩存。