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

于 2024-05-28 12:22:02 发布
阅读量145 收藏
点赞数 2
文章标签： vue.js nginx 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alan15496/article/details/139263250
版权
  1. 刷新404问题
    1. 只需要在nginx配置文件的location中加上这段配置：try_files $uri $uri/ /index.html;
  2. 配置代理转发
location /dev/ {
	# 设置代理目标
	proxy_pass http://xxx/;
}
1+2
关注
vue项目nginx部署刷新报错404
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
12-23 372
最近部署VUE项目，刷新后提示404
vue开发环境、生产环境nginx配置代理转发跨域
考拉很OK
12-08 1390
'/api' : '/demo/api', //否则nginx不能转发请求的接口。注意：proxy_pass https://www.baidu.com/;注意：proxy_pass https://www.baidu.com/;注意：proxy_pass https://www.baidu.com/;
Nginx部署vue项目（vue+nginx）代理转发
苦涩记忆
12-09 3265
安装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
前后端分离（二）之vue前端的nginx配置代理转发
用心丈量世界
10-21 5915
第一：安装、配置 linux中首先安装nginx，然后进入目录 /etc/nginx/conf.d，在这里新增一个自己项目的myself.conf文件 使用vi编辑，内容： upstream my_server { server 192.168.20.101:10001...
Nginx部署vue项目，刷新后找不到界面
最新发布
小张微说的博客
05-26 2823
解决方案： 修改配置文件： listen 80; # 监听的端口 server_name xx.xx.xxx.xx; # 处理的host地址 (请替换成你对应的项目访问 ip 或 域名)!!! root /usr/share/nginx/html; # vue项目存在的目录(替换成你对应的地址，如果你这是用docker部署的请改成你容器内的地址) ...
vue配置转发代理_Vue项目部署到Nginx服务器上，如何配置代理转发？
weixin_42297714的博客
01-14 1520
在本地Vue项目的生产环境中，我将假数据存在根目录static/mock下，并且配置了proxyTableproxyTable: {'/api': {target: 'http://localhost:8080',changeOrigin:true,pathRewrite: {'^/api': 'static/mock' //将url中的api替换成static/mock}}}我在使用Axois...
Nginx 部署多个VueCli项目或者代理转发多个项目
ss5656的博客
07-29 1370
本地开发的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 1810
软件环境 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访问项目。
vue下使用nginx刷新页面404的问题解决
10-16
在使用Vue.js构建的前端项目中，尤其是使用了现代前端技术栈如Vue Router进行路由管理时，部署到生产环境后可能会遇到在使用nginx作为反向代理服务器时刷新页面导致的404错误问题。这个问题通常是由于nginx的默认...
在nginx上部署vue项目(history模式)的方法
08-28
总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的...
vite vue3 histroy项目发布nginx刷新后404问题
ICEBOUND47的博客
02-17 3555
打包后发布服务能正常运行，但是刷新之后项目404 在网上找到相关配置仍然未解决为题 server { listen 80; index index.html; root /xxxx/dist; #vue-router配置 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^
Vue上传宝塔Nginx反向代理，解决Vue上传服务器后刷新404
qying的博客
08-11 588
Vue上传宝塔Nginx反向代理，解决Vue上传服务器后刷新404
nginx 部署vue3项目 页面404
sinat_37012541的博客
04-30 2623
vue3 vite 部署到nginx 刷新404 500等问题处理
vue项目通过nginx部署，刷新产生404问题的解决
m0_37630138的博客
10-08 4697
vue项目通过nginx部署，刷新产生404问题的解决
Nginx部署vue项目和配置代理
if's Blog
08-03 1529
1.nginx安装和启动 # 安装nginx sudo apt-get install nginx # 启动 sudo service nginx start 验证安装 # 安装完成后使用nginx -v检查，如果输出nginx的版本信息表明安装成功 nginx -v # 如果输出类似于这样的版本号等，证明安装完成 nginx version: nginx/1.14.0 (Ubuntu) 2.修改nginx配置文件，部署项目 查看nginx的配置，linux系统下的配置文件通常会存放在/etc目录下的n
docker-compose部署vue+nginx接口转发
weixin_45518581的博客
04-11 333
5、最后在浏览器上输入http://192.168.110.10:5000就可以访问到页面。这个5000端口是docker-compose配置文件里面映射出来的访问端口。6、如果想通过域名和去掉端口访问。那就在nginx的server模块里面server_name 配置访问的域名，然后加上。把这两个文件放到服务器和前端dist打包的文件同一个目录下。就可以通过域名访问nginx，nginx再转发的前端容器。在nginx的server配置接口。4、在nginx配置接口。这三个在同一目录下。
使用nginx部署vue项目
liucai1018的博客
05-07 2822
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时CSS样式失效问题解决方案
"Vue.js应用在打包部署到Nginx时可能会遇到CSS样式不生效的问题。这通常是由于静态资源路径引用错误或者服务器配置不当引起的。本文将探讨如何解决这一问题。 首先，Vue.js项目通常使用Webpack进行打包，Webpack在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值