解决vue项目404 nginx url转发

目的:解决vue刷新404问题
方案:我是后台程序员所以通过设置nginx.conf
方法:

server {
    listen       8082;
    #server_name  www.czconfig.com ;
    root  'webroot(网站根目录)';
    location / {
        index  index.html;
        root 'webroot(网站根目录)';
        try_files $uri $uri/ /index.html;    #找指定路径下文件,如果不存在,则转给哪个文件执行     
    }
}

nginx -t //检查配置文件是否有错误 运维人员懂重要性
nginx -s stop //停止服务
start nginx //启动服务
nginx -s reload //平滑重启nginx

结果:当然是 success!!!
说到这里大家就明白了,能看懂上面的配置了。
那有人会问了,还要try_files干什么呀,直接使用rewrite不就可以了吗?
答:不可以,因为rewrite这个指令把所有请求过来的url地址,都与htaccess文件中的正则地址进行一次匹配,这样的话,静态的url地址也进行了一次匹配,比如http://xxxx.com/aa.png,这个地址是不需要重写的,但是rewrite也进行了一次匹配,这就浪费服务器资源,影响执行效率。而我们真正需要匹配的,其实都是一些动态url地址,如果我说这么多,你还不明白的话,可以打印日志查看。

注意不是“重定向” 是路由转发! 转发! 转发!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 当使用NGINX部署Vue项目时,可以通过配置代理服务器来解决请求跨域问题。在NGINX的配置文件nginx.conf中,可以使用server块来配置代理服务器。其中,可以使用location块来指定需要重定向的URL路径。例如,可以使用location /api来将/api路径下的请求转发给真正的后端服务器。另外,为了解决在刷新页面或访问路由配置页面时出现404错误的问题,可以使用try_files指令将访问重定向到index.html页面,并交由index.html处理对应的路由跳转。具体的配置可以参考引用\[1\]和引用\[2\]中的示例代码。\[1\]\[2\] #### 引用[.reference_title] - *1* [VUE项目配置API服务器的两种情况 + NGINX 配置VUE项目](https://blog.csdn.net/weixin_40079913/article/details/114629378)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [nginx部署vue项目,刷新页面404](https://blog.csdn.net/qq_45029459/article/details/129014641)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Nginx 部署 vue项目 (history模式)](https://blog.csdn.net/yorcentroll/article/details/105404259)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值