将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选项
在前端路由配置页面,配置base为此路由名,让前端路由从此项目的路由名开始查找,而不是从’/'开始第四步,为了静态资源的正确显示,修改vue.config.js中的publicPath
将vue.config.js中的publicPath改为’./’第五步,将Vue项目重新打包并覆盖服务器上之前的目录,然后访问自己的项目
先自我介绍一下,小编上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦