Nginx部署vue项目,刷新后找不到界面或者刷新报500 Internal Server Error

简介: Nginx部署vue项目,刷新后找不到界面或者刷新报500 Internal Server Error

找不到的解决方案

解决方案:

修改配置文件:

```

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


500的解决方案

解决方案:修改nginx.conf, 释放出权限

```

user root; # 第一行

```

参考地址;

https://blog.csdn.net/changyana/article/details/123453755

目录
相关文章
|
20天前
|
JavaScript 应用服务中间件 nginx
vue项目中页面遇到404报错
vue项目中页面遇到404报错
|
25天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
101 0
|
20天前
|
JavaScript
Vue项目中强制刷新页面的方法
Vue项目中强制刷新页面的方法
14 0
|
1月前
|
JavaScript 前端开发 网络架构
Vue3项目中使用vue-router
Vue3项目中使用vue-router
44 0
|
1天前
|
JSON 数据可视化 前端开发
vue3+threejs+koa可视化项目——模型文件上传(第四步)
vue3+threejs+koa可视化项目——模型文件上传(第四步)
15 7
|
1天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
18 5
|
1天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
16 6
|
1天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
10 3
|
4天前
|
JavaScript
Vue 如何新建一个项目(如何安装依赖)
Vue 如何新建一个项目(如何安装依赖)
10 0
|
11天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
12 0