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

相关推荐
卓伊凡5 分钟前
如何在AI编译器TRAE CN AI 编程 IDE 编译器中安装 PHP Debug 扩展并进行项目调试-优雅草卓伊凡
前端·后端
沈七QWQ6 分钟前
AI通关笔记第一章:RAG 技术揭秘 —— 从0到1带你手撸原生RAG!
前端·llm
aiwery7 分钟前
算法题——找到字符串中所有字母异位词
javascript·算法
风铃喵游9 分钟前
前端内存优化:String 鲜为人知的一些事
前端·性能优化
鹏程十八少12 分钟前
4. Android <卡顿四> 卡顿性能第二代工具 Perfetto 精准定位 Android 性能瓶颈 (工具使用)
前端
爱学大树锯13 分钟前
【Ruoyi 解密 - 08. 前端探秘1】------ 从“交互原理”到“开发逻辑”,后端也能看懂的前端实战指南
前端·elementui·vue
Sherry00714 分钟前
深度解析 Tree-Shaking:从入门到究极理解
前端·webpack·前端工程化
console_warrior16 分钟前
基于Node.js(Koa)实现云函数平台(Serverless Function)含体验良好的在线代码编辑器
javascript
Spirited_Away16 分钟前
使用driverjs灵活设计页面用户引导
前端
Spirited_Away16 分钟前
前端实现文本复制、禁用复制、解除复制功能
前端