nginx前端部署配置

nginx前端部署配置

Nginx部署项目
1、yarn build打包Vue项目
2、打开nginx.conf文件,配置对应的信息

nginx.conf

location / {
   root  C:\Users\17542\Desktop\rrpject-v2\dist;
   root  index.html index.htm;
   try_files $uri $uri/ @router;    //解决页面刷新404问题
}
location @router {
   rewrite ^.*$ /index.html last; // Vue项目路由不是真实存在的
}

3、检查配置文件是否配置成功

cmd
nginx -t -c D:nginx-1.16.1\conf\nginx.conf

如图:
在这里插入图片描述

分解:
1).配置端口及路径

在这里插入图片描述
2)、检查nginx的配置是否成功
nginx -t -c nginx文件目录
最后提示success

在这里插入图片描述
3)、启动 start nginx

4)处理相关报错

try_files $uri $uri/ @router;     //找指定路径下的文件,如果不存在,则转给哪个文件执行

 try_files $uri $uri/ /index.html; // 这一行是为了SPA应用能正确处理路由

location @router{
   rewrite ^.*$ /index.html last;    //处理500
}

在这里插入图片描述

在这里插入图片描述
5)重启命令:

nginx -s reload
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值