文章转载于：
资料来源：
13-云服务器nginx代理前端静态资源和后端接口_哔哩哔哩_bilibili
1、第一步打开文件
2、Vue.config.js这里的target进行修改，修改为主机号+端口
正确的写法：http://公网ip:端口
3、打开Ngnix的配置，这里Ngnix
4、我去访问这个主机+端口，就能够响应下面的内容
5、如果你访问的是/，就会把前端的一些资源给你
6、点击这里可以进行打包
7、打好包的dist文件
8、打好包的复制一下
10、找一个地方直接粘贴
11、我们要复制前端放置的路径
12、
13、访问的是/user怎么办，会继续解析，解析你的url
14、要跟application相同
15、要跟Ngnix的内容相同，要跟Tomcat下写的端口一样
16、把内容复制一下
17、复制到我们的首页Ngnix
18、这里有个配置修改，把他扔进去
19、点服务，重载配置
20、可以写成这样，HTTP协议默认就是80，因此可以不写
21、这里就能够成功访问到了
22、Ngnix的配置
user www; worker_processes auto; error_log /www/wwwlogs/nginx_error.log crit; pid /www/server/nginx/logs/nginx.pid; worker_rlimit_nofile 51200; events { use epoll; worker_connections 51200; multi_accept on; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; client_max_body_size 100m; #用于tomcat反向代理,解决nginx 504错误 proxy_connect_timeout 7200; #单位秒 proxy_send_timeout 7200; #单位秒 proxy_read_timeout 7200; #单位秒 proxy_buffer_size 16k; proxy_buffers 4 64k; proxy_busy_buffers_size 128k; proxy_temp_file_write_size 128k; # ps:以timeout结尾配置项时间要配置大点 server { listen 80; server_name localhost; charset utf-8; location / { root /home/wqj/staticResources/dist; try_files $uri $uri/ /index.html; index index.html index.htm; } location /prod-api/ { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:8765/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
23、相关接口的含义：这里的listen用来监听80端口，这里
24、然后就进去了
25、打好包，修改好Ngnix配置，重载好配置，就能够看到了，通过主机号就可以正常访问了
