Linux服务器上Nginx 发布Vue项目以及端口转发遇到的坑

1. 发布Vue项目自定义路径问题
2. 端口转发遇到的样式无法加载问题

一、发布Vue项目遇到的坑

 今日在研究Nginx发布多个项目时，同一对外端口通过根路径区分不同项目。在其中一个是vue项目时，想在其前方添加新的根目录如：

location /dwe {
    root   html;
    try_files $uri $uri/ /index.html last;    
}

然后通过 http://localhost/dwe 进行访问时页面雪白，什么也没有同时CSS样式和JS却可以访问。在百度查询许久之后，偶然发现一篇帖子说明：Vue打包dist 之前Vue的路由默认为“/” 。故而当Nginx发布vue项目时不能再前方添加新的根目录。想要发布后带有自定义的根路径。可以使用另一个服务器单独发布vue，再由统一对外服务器进行端口转发操作。(Vue修改默认路由形式未进行测试，不做说明)

二、端口转发遇到样式无法加载问题

当我们添加端口转发时，项目中的样式在被转发的服务上，转发后样式是无法被加载的。如下配置：

location / {
    proxy_pass http://localhost:8888/;
    proxy_pass_header Server;
    proxy_set_header Host   $host:80;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Scheme $scheme;
}

当我们访问http://localhost时只有页面，并不会存在样式，图片，js等加载。这时我们需要修改转发配置，并添加新的配置信息。推荐配置如下：

upstream ruoyi-project{
  server localhost:8080;
}

将要转发的请求地址单独提出，使用 upstream 进行封装，自定义一个自己的名字。将其放到http标签内部，与server标签同级且在其上方。 

location /ruoyi {
    proxy_pass http://ruoyi-project/;
    proxy_pass_header Server;
    proxy_set_header Host   $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Scheme $scheme;
}

在转发时将proxy_pass设置成upstream的名字。然后添加样式转发配置

location ~ .* {
    proxy_pass http://ruoyi-project;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

同样将proxy_pass 设置为upstream的名字即可