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

相关推荐
kgduu23 分钟前
js之客户端存储
javascript·数据库·oracle
四千岁35 分钟前
2026 最新版:WSL + Ubuntu 全栈开发环境,一篇搞定!
javascript·node.js
猩猩程序员1 小时前
Pretext:一个绕过 DOM 的纯 JavaScript 排版引擎
前端
竹林8181 小时前
从“连接失败”到丝滑登录:我用 ethers.js 连接 MetaMask 的完整踩坑实录
前端·javascript
神舟之光1 小时前
jwt权限控制简单总结(乡村意见簿-vue-express-mongdb)
前端·vue.js·express
斌味代码1 小时前
Nginx 配置实战(2026最新版):反向代理+负载均衡+HTTPS+性能优化一网打尽
nginx·https·负载均衡
铭毅天下1 小时前
EasySearch Rules 规则语法速查手册
开发语言·前端·javascript·ecmascript
bjzhang751 小时前
使用 HTML + JavaScript 实现 SQL 智能补全功能
javascript·html·sql智能补全
GISer_Jing1 小时前
AI Agent操作系统架构师:Harness Engineer解析
前端·人工智能·ai·aigc
英俊潇洒美少年1 小时前
css中专门用来提升渲染性能、减少重排重绘的属性
前端·css