nginx部署vue项目,vue.conf.js配置文件默认配置publicPath为根路径 publicPath：‘/’，只需要打包好dist包，部署nginx即可，根据前端配置好的axios请求前缀baseUrl='prod-api'，配置拦截，跳转代理的后台接口即可。
location / {
root /home/projects/web_front;
#当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
#例如：user/getByid/1 ,使用hash模式无此问题
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
当某些应用部署在内部网络，通往外网只放行了一个端口时，nginx需要配置统一端口的的多应用服务器（一个server内配置多个应用的时候例如电脑端访问http://x.x.x.x:8080,访问电脑端，http://x.x.x.x:8080/app时访问H5端），需要在vue.conf.js配置文件配置publicPath，例如 publicPath：‘/app’，当使用 publicPath：‘/app’时，需要配置配置nginx的location选项，将location的root配置项目改为alias。
location ^~app {
alias /home/projects/h5_front;
#当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
#例如：user/getByid/1 ,使用hash模式无此问题
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
因为 nginx的location获取到匹配路径(/app)之后，root配置会使用ip+端口的方式请求nginx获取服务器的静态资源，(例如：http://x.x.x.x:8080/aaa.img),而使用alias配置时，会使用ip+端口+匹配的路径访问服务器静态资源,(例如：http://x.x.x.x:8080/app/aaa.img),此时可以正常访问服务器资源。不然会出现报错，找不到服务器静态资源。
nginx配置
server {
listen 8080;
server_name localhost;
#例如：/ 根路径为电脑端
location / {
root /home/projects/web_front;
#当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
#例如：user/getByid/1 ,使用hash模式无此问题
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
#例如：/app 路径为移动H5端
location ^~app {
alias /home/projects/h5_front;
#当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
#例如：user/getByid/1 ,使用hash模式无此问题
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
#nginx配置后台代码，当匹配到prod-api时使用代理地址请求
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:8080/; #后台代理地址
}
# 避免actuator暴露
if ($request\_uri ~ "/actuator") {
return 403;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
### 最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
