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

相关推荐
小王码农记11 小时前
vue2中实现天气预报
前端·javascript·vue.js·echarts
我命由我1234511 小时前
Element Plus 组件库 - Select 选择器 value 为 index 时的一些问题
开发语言·前端·javascript·vue.js·html·ecmascript·js
一念一花一世界11 小时前
Arbess从初级到进阶(2) - 使用Arbess+GitLab实现Vue.js项目自动化部署
vue.js·ci/cd·gitlab·arbess
qq. 280403398412 小时前
js 原型链分析
开发语言·javascript·ecmascript
有趣的野鸭12 小时前
JAVA课程十一次实验课程主要知识点示例
java·前端·数据库
格鸰爱童话12 小时前
next.js(二)——从react到next.js
前端·javascript·react.js
Hammer Ray15 小时前
SourceMap知识点
javascript·sourcemap
西洼工作室15 小时前
项目环境变量配置全攻略
前端
阿珊和她的猫15 小时前
Webpack 优化:构建速度与包体积的双重提升
前端·webpack·node.js
阿珊和她的猫15 小时前
Webpack 打包体积优化:让应用更轻量、更高效
前端·webpack·状态模式