将Vue项目部署在Nginx 解决前端路由 反向代理和静态资源问题

将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题

需求：

一台服务器，Linux

安装了Nginx

使用Vue脚手架编写的Vue项目

第一步：将Vue项目打包，然后将生成的dist文件夹中的内容放入服务器中的

打包

npm run build

生成的dist目录

上传在服务器上（这里用的是宝塔管理面板）

第二步，修改Nginx配置，并进行反向代理

在Nginx配置中新增一个监听路由

server

{

listen 80;

server_name xxxx.xyz;

…… 其他路由

location /此Vue路由名

{

alias /www/wwwroot/放置Vue页面的目录/;

try_files $uri $uri/ /此Vue路由名/index.html;

index index.html index.htm;

}

}

(因为是多个项目同用一个端口，所以需要添加一个路由名给此Vue项目)

前端路由需要添加此配置项

try_files $uri $uri/ /此Vue路由名/index.html;

(此项配置是为了前端路由的跳转，当所有的后端路由都找不到页面时，从新发送给前端index页面，让index页面查找前端路由)

应为Vue项目打包成静态资源后无法在用proxy进行服务器代理，但可以使用Nginx来实现服务器代理

Vue项目中的服务器代理

在Nginx中进行服务器代理

server{listen 80;server_name xxxx.xyz;…… 其他路由location /此Vue路由名{alias /www/wwwroot/放置Vue页面的目录/;try_files $uri $uri/ /此Vue路由名/index.html;index index.html index.htm;}location /oneApi{rewrite ^.+oneApi/?(.*)$ /$1 break;proxy_pass ;}}

第三步，为了让路由正确跳转，修改前端路由的base选项

第四步，为了静态资源的正确显示，修改vue.config.js中的publicPath

第五步，将Vue项目重新打包并覆盖服务器上之前的目录，然后访问自己的项目

先自我介绍一下，小编上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦