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分钟速写快排7 小时前
孔乙己的茴字有多少种写法?|AI 对话实时通信的三种实现
前端·javascript·github
Penge6669 小时前
JavaScript:BOM 详解
前端
梯度下降者9 小时前
Nuxt框架
vue.js·服务端渲染·全栈开发·混合渲染·nuxt框架
李纲明9 小时前
WordPress 打开页面直接报 500 而不是白屏:先核伪静态与文件权限,再查服务器错误日志
nginx·wordpress·文件权限·伪静态·错误日志·devdiy·500错误
Penge6669 小时前
Vite vs Webpack:前端构建工具原理与实战
前端
Penge6669 小时前
前端包管理工具:npm、Yarn、pnpm 快速入门
前端
Penge66610 小时前
Sass 了解
前端
Penge66610 小时前
Webpack 打包从 0 到 1 实战笔记
前端
Penge66610 小时前
Webpack 入门:是什么、为什么需要、怎么使用?
前端
Penge66610 小时前
Ant Design(Antd)了解
前端