提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Nginx部署Vue项目

Vue项目部署Nginx
2023-06-13 09:13:55 时间

用Vue开发时，经常配置这样的代理服务器（这里展示Vite的配置项）：

{
    server: {
        port: 80,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8084/',
                changeOrigin: true,
                rewrite: path => path.replace(/^\/api/, '')
            }
        }
    }
}

我们的需求大概是，把类似于这样的请求：

http://localhost/api/xxx

转发到：

http://localhost:8084/xxx

但是部署到Nginx服务器的时候，显然上面在Vite里配置的代理服务器是无效的。

经过我的一番查询，发现下面这些配置是可以起到相同的作用的

解决方案

本文假设你刚安装好Nginx，还没有进行任何配置。 并且，我的服务器是Ubuntu，如果有些命令或者路径不一样，还请去搜一下对应系统版本的命令和路径是什么。

因为Nginx默认是有一个配置文件在生效的，我们需要把它注释掉。

找到配置文件nginx.conf，我的服务器路径是/etc/nginx/nginx.conf，找到类似于下面的这一项：

include /etc/nginx/sites-enabled/*;

把这句话注释掉，就是前面加个井号：

# include /etc/nginx/sites-enabled/*;

刚才注释掉的这句话应该就在http配置项里，下一步就是在这个配置项下新加一个server项，下面可以这样配置：

server {
    # 服务器名字，可以随便填
    server_name  XXX;
    # Nginx去哪里找文件
    root /path/to/web/root;
    # 这里是设置服务器端口为80，并且是默认服务器
    listen 80 default_server;
    # 设置入口文件
    index index.html;
    # 这里相当于Vite里配置的代理服务器
    location ~ /api/ {
        # 把路径头上的/api/去掉
        rewrite "^/api/(.*)$" /$1 break;
        # 把请求转发到本地的8084端口
        proxy_pass http://127.0.0.1:8084;
    }
    # 这个配置项配置这里主要是为了Vue
    # 设置路由为history模式后
    # 刷新界面404的问题
    location / {
        # 这个原理也就是先尝试找到给定的路径
        # 如果找不到就返回index.html
        try_files $uri $uri/ /index.html;
    }
}

配置完后重启nginx。

nginx -s reload

那么之后就可以把：

http://localhost/api

下的请求转发到：

http://localhost:8084

后记

如果你还需要配置多个代理，如在上文的基础上，还需要把：

http://localhost/api/test

下的请求转发到：

http://localhost:8085

那么需要进行这样的操作：

location ~ /api/test/ {
    rewrite "^/api/test/(.*)$" /$1 break;
    proxy_pass      http://127.0.0.1:8085;
}

把这段配置放在之前配置的 /api 上面。一定要放在上面，否则你的请求会被转发到：

http://localhost:8084/test

就达不到我们的目的了。

相关文章