Nginx部署vue项目,刷新后找不到界面

解决方案:

修改配置文件:

复制代码
listen   80; # 监听的端口 
        server_name  xx.xx.xxx.xx; # 处理的host地址 (请替换成你对应的项目访问 ip 或 域名)!!!
        root    /usr/share/nginx/html; # vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址)
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }

参考:https://blog.csdn.net/qq_43059674/article/details/110296807

相关推荐
毕设源码-朱学姐2 小时前
【开题答辩全过程】以 工厂能耗分析平台的设计与实现为例,包含答辩的问题和答案
java·vue.js
老前端的功夫3 小时前
Vue 3 性能深度解析:从架构革新到运行时的全面优化
javascript·vue.js·架构
天天扭码3 小时前
如何实现流式输出?一篇文章手把手教你!
前端·aigc·ai编程
前端 贾公子4 小时前
vue移动端适配方案 === postcss-px-to-viewport
前端·javascript·html
GISer_Jing5 小时前
AI营销增长:4大核心能力+前端落地指南
前端·javascript·人工智能
明远湖之鱼5 小时前
一种基于 Service Worker 的渐进式渲染方案的基本原理
前端
zwxu_5 小时前
Nginx NIO对比Java NIO
java·nginx·nio
前端小端长6 小时前
Vue 中 keep-alive 组件的原理与实践详解
前端·vue.js·spring
FeelTouch Labs6 小时前
Nginx核心架构设计
运维·前端·nginx