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

相关推荐
只与明月听几秒前
前端学算法-二叉树(一)
前端·javascript·算法
快乐星球喂几秒前
使用vant长列表组件vant-list
前端
谢尔登9 分钟前
【React】使用 useContext + useReducer 实现一个轻量的状态管理库
前端·javascript·react.js
Bee.Bee.14 分钟前
vue3提供的hook和通常的函数有什么区别
前端·javascript·vue.js
元拓数智16 分钟前
企业级人员评价系统Web端重构实战:前端架构效能升级
前端·重构·架构
sunshine_程序媛16 分钟前
在Vue2项目中引入ElementUI详细步骤
前端·ui·elementui·前端框架·vue
离岸听风18 分钟前
Docker 构建文件代码说明文档
前端
VisuperviReborn23 分钟前
前端开发者的知识深度革命,从打牢基础开始
前端·javascript·架构
Nano23 分钟前
Vue响应式系统的进化:从Vue2到Vue3.X的深度解析
前端·vue.js
工业3D_大熊25 分钟前
3D Web轻量化引擎HOOPS Communicator赋能一线场景,支持本地化与动态展示?
前端·3d