Vue项目部署Nginx出现刷新404和配置代理转发

最新推荐文章于 2025-02-19 19:10:51 发布

1+2

最新推荐文章于 2025-02-19 19:10:51 发布

阅读量215

点赞数 2

文章标签： vue.js nginx 前端

本文链接：https://blog.youkuaiyun.com/Alan15496/article/details/139263250

版权

刷新404问题
1. 只需要在nginx配置文件的location中加上这段配置：try_files $uri $uri/ /index.html;
配置代理转发

location /dev/ {
	# 设置代理目标
	proxy_pass http://xxx/;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

1+2

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue项目nginx部署刷新报错404

知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】

12-23

580

最近部署VUE项目，刷新后提示404

Vue3项目部署nginx实战

yangchangfu2016的博客

10-07

665

在Centos7.5上使用nginx，并部署vue3项目。在项目部署过程中，会遇到404错误、代理、跨域问题。

参与评论您还未登录，请先登录后发表或查看评论

vue开发环境、生产环境配置与nginx配置后端代理转发跨域

DN金猿的博客

10-13

1424

后端提供的请求接口完整地址示例：https://www.baidu.com/list。

Nginx部署vue项目（vue+nginx）代理转发

苦涩记忆

12-09

3428

安装nginx 下载解压就可以了配置代理 nginx/conf/nginx.conf server { listen 8088; #访问的端口 server_name localhost; #ip,服务器名 #charset koi8-r; #access_log logs/host.access.log main; root F:\szpf\coding\shenzhen-oa-website-mas

vue3项目上线配置 nginx代理

最新发布

前端大白话

02-19

1231

Nginx 反向代理就像是一个“中间人”。想象一下，有很多人（客户端）想要访问一个大型商场（服务器）里的不同店铺（应用服务），但商场为了管理方便，只开了一个大门，所有人都得从这个大门进出。Nginx 就扮演了这个大门的角色，客户端的请求先到达 Nginx，然后 Nginx 根据一定的规则把请求转发到商场里对应的店铺，最后再把店铺的响应返回给客户端。在 Vue 3 项目里，Nginx 反向代理可以帮我们解决跨域问题、实现负载均衡等。

vue配置转发代理_Vue项目部署到Nginx服务器上，如何配置代理转发？

weixin_42297714的博客

01-14

1572

在本地Vue项目的生产环境中，我将假数据存在根目录static/mock下，并且配置了proxyTableproxyTable: {'/api': {target: 'http://localhost:8080',changeOrigin:true,pathRewrite: {'^/api': 'static/mock' //将url中的api替换成static/mock}}}我在使用Axois...

vue开发环境、生产环境nginx配置代理转发跨域

leveretz的博客

02-06

561

vue开发环境、生产环境nginx配置代理转发跨域

vue下使用nginx刷新页面404的问题解决

10-16

在使用Vue.js构建的前端项目中，尤其是使用了现代前端技术栈如Vue Router进行路由管理时，部署到生产环境后可能会遇到在使用nginx作为反向代理服务器时刷新页面导致的404错误问题。这个问题通常是由于nginx的默认...

nginx下部署vue项目的方法步骤

09-29

将Vue项目部署到Nginx上，可以让Vue应用通过Web服务器进行访问，并且可以享受到Nginx提供的性能优化和安全特性。在部署前，我们需要准备好Vue项目的构建产物，通常是一个dist文件夹，这个文件夹包含了编译打包后的...

vite vue3 histroy项目发布nginx刷新后404问题

ICEBOUND47的博客

02-17

3754

打包后发布服务能正常运行，但是刷新之后项目404 在网上找到相关配置仍然未解决为题 server { listen 80; index index.html; root /xxxx/dist; #vue-router配置 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^

Nginx部署vue项目，刷新后找不到界面

小张微说的博客

05-26

3257

解决方案：修改配置文件： listen 80; # 监听的端口 server_name xx.xx.xxx.xx; # 处理的host地址 (请替换成你对应的项目访问 ip 或域名)!!! root /usr/share/nginx/html; # vue项目存在的目录(替换成你对应的地址，如果你这是用docker部署的请改成你容器内的地址) ...

使用nginx部署vue项目

liucai1018的博客

05-07

2879

1 配置nginx.conf 1.1 用xshell连接上linux测试服务器 1.2 执行命令查看nginx服务启动情况：ps aux | grep nginx 1.2.1 会出现多个，其中有一个是master，然后后面跟了一段路径，这里是：/usr/sbin/nginx，表示运行的是这个/usr/sbin/ 下的 nginx文件； 1.2.2 执行/usr/sbin/nginx -t(或者进入/usr/sbin目录执行 nginx -t)，这个时候你会看到...

前后端分离（二）之vue前端的nginx配置代理转发

用心丈量世界

10-21

6018

第一：安装、配置 linux中首先安装nginx，然后进入目录 /etc/nginx/conf.d，在这里新增一个自己项目的myself.conf文件使用vi编辑，内容： upstream my_server { server 192.168.20.101:10001...

Nginx 部署多个VueCli项目或者代理转发多个项目

ss5656的博客

07-29

1428

本地开发的vuecli使用地址http//127.0.0.18080/index能正常打开，代理转发http//127.0.0.18080/re/index到vue项目后，能加载所有的页面资源，但是页面不能显示出来。这里部署了3个项目，当访问http//localhost的域名时，进入第一个项目，访问域名http//localhost/anan/**时，进入第二个项目，访问http//localhost/re/**时，进入第三个项目。...

windows下将vue项目部署到nginx遇到404,500错误

u014220146的博客

06-20

2091

软件环境 windows10 , vue 2.0, nginx-1.22.1, npm 8.1.1在vue项目中使用命令打包项目，在根目录下得到文件夹在nginx官网下载最新的1.22.1版本，在windows下直接解压使用拷贝dist文件夹到nginx根目录下的html文件夹里面在cmd命令行中进入nginx根目录，使用命令启动nginx（重载，杀死进程打开浏览器，根据配置的端口和ip访问项目。

nginx 部署vue3项目页面404

sinat_37012541的博客

04-30

3412

vue3 vite 部署到nginx 刷新404 500等问题处理

vue项目线上页面刷新报404 解决方法

zhaofuqiangmycomm的博客

02-01

2519

打包后的dist下只有一个 index.html 文件及一些静态资源，这个是因为Vue是单页应用(SPA)，只有一个index.html作为入口文件，其它的路由都是通过JS来进行跳转

Nginx部署Vue项目动态路由刷新404

顶顶顶顶顶顶顶顶顶顶顶顶

08-13

310

Nginx部署Vue项目动态路由刷新404

vue项目部署Nginx，api待处理

01-14

### 配置Nginx部署Vue前端应用为了成功地将Vue前端应用程序部署至Nginx服务器，需遵循一系列特定的操作指南。这不仅涉及到了解如何准备和上传静态文件到服务器，还涉及到配置Nginx以适配Vue单页面应用(SPA)的需求[^1]。 #### Nginx基础配置当配置Nginx用于Vue SPA时，重要的一点是要确保所有的未知URL都指向`index.html`文件，这是因为Vue Router默认情况下使用HTML5 History模式工作，在这种模式下，浏览器会尝试解析路径而不会刷新整个页面。如果直接访问子路由，则可能遇到404错误，因为Nginx不知道该如何处理这些路径。因此，应该调整Nginx配置如下： ```nginx server { listen 80; server_name localhost; location / { root /path/to/vue-app/dist; try_files $uri $uri/ /index.html; index index.html index.htm; } } ``` 这段配置指示Nginx在找不到对应的物理资源时返回`index.html`，从而使Vue Router接管路由控制[^3]。 #### 设置反向代理处理API请求对于前后端分离的应用程序来说，解决跨域问题是必不可少的一部分。在生产环境中，可以通过配置Nginx作为反向代理来代替开发期间使用的Webpack `devServer.proxy`功能。这样可以有效地隐藏真实的后端地址，并简化客户端发起的HTTP请求逻辑[^2]。下面是一个简单的例子展示怎样设置Nginx来进行反向代理操作： ```nginx location /api/ { proxy_pass http://backend_server_address/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } ``` 这里定义了一个名为`/api/`的位置匹配规则，任何以此开头的请求都会被转发给指定的后台服务(`http://backend_server_address`)。需要注意的是，实际部署时应替换掉示例中的占位符为真实的服务地址[^5]。