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";表示允许缓存。