解决vue项目部署到Nginx刷新页面报404的问题

最新推荐文章于 2024-03-11 19:18:30 发布
最新推荐文章于 2024-03-11 19:18:30 发布
阅读量1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42461064/article/details/109308925
版权

编辑配置文件nginx.conf

vim vue_8000.conf     -- 进入配置文件

输入命令 i 进入编辑模式,在指定位置添加代码
 
location / {
    root ...
    index ...
    try_files $uri $uri/ /index.html; -- 解决页面刷新404问题
}

esc

:wq                    -- 保存并退出

nginx -s reload        -- 重启nginx

 

小花~
关注
nignx解决vue部署服务器刷新页面出现404问题
猿小白的博客
03-11 2996
在部署前后端分离项目项目的时候，有可能会遇到能访问页面，但是刷新页面却404。 解决办法： location / { root html/dist; try_files $uri $uri/ /index.html; # 这行配置代码是关键 index index.html index.htm; } 改完之后，记得重启一下nginx服务。 ...
Vue 项目部署到服务器后，刷新页面出现 404
qq_43325350的博客
06-04 1659
Vue 项目部署到服务器后，刷新页面出现 404
vue项目部署后刷新页面404的原因和解决方案
最新发布
为技术而生
03-11 8970
vue项目打包部署上线后发现项目是可以正常运行，但是使用F5或者浏览器的刷新按钮直接变成404页面。 扩展：当项目部署到服务器子文件路径时资源404问题。
Vue项目服务器部署刷新页面404问题及解决
IChen.的博客
10-23 6035
因为在vue项目开发的时候是访问自己的8080服务器,后端有进行处理，在刷新界面后找不到相对路径时，会重新渲染index.html界面，把路由的控制权交给前端，然后前端负责路由的匹配，在找到符合/jichu /123 这种格式的路由后,就会匹配成功。vue router mode 默认为hsas，这样的url中会带有#，如果改成mode:'history’就能去掉#号，也可以正常访问，但是再次刷新你页面就会出现404。因为网页上显示的是静态绝对路径，而实际上服务器上是没有改路径的，多以导致刷新汇报错误。
vue部署项目刷新404的解决方案
xuan2717的博客
06-14 86
vue部署项目刷新404的解决方案
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue下使用nginx刷新页面404的问题解决
10-16
在使用Vue.js构建的前端项目中，尤其是使用了现代前端技术栈如Vue Router进行路由管理时，部署到生产环境后可能会遇到在使用nginx作为反向代理服务器时刷新页面导致的404错误问题。这个问题通常是由于nginx的默认...
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
08-27
总结起来，解决Vue项目在Tomcat上使用History模式刷新报404错误的步骤包括： 1. 在打包后的项目根目录下创建`WEB-INF`文件夹，并在其中创建`web.xml`。 2. 编写`web.xml`，设置404错误重定向到`index.html`。 3. 在...
解决vue打包项目后刷新404的问题
08-27
然而，当Vue项目被打包后，用户在浏览器中直接访问或刷新非根路由（如`/about`或`/contact`）时，可能会遇到404 Not Found错误。这是因为浏览器向服务器请求的是特定的路径，而服务器无法找到对应的静态资源。为了...
vite vue3 histroy项目发布nginx刷新后404问题
ICEBOUND47的博客
02-17 3561
打包后发布服务能正常运行，但是刷新之后项目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项目刷新页面404
lihefei_coder的博客
06-29 2695
vue项目router用的是history模式，用nginx代理服务器部署后只能看到主页，刷新或跳转其他页面就会出现404。 解决方法：修改nginx.conf配置文件，将客户端发来的url重定向到默认的index.html，才能正常访问。 关键代码： try_files $uri $uri/ /index.html; 完整配置： server { listen XXXX; //端口号 server_name XXX.XXX.XXX.XXX; //本机IP地址
Nginx部署Vue项目以及解决刷新页面404问题
lxw1844912514的博客
02-23 3161
一、打包项目 1.在项目中的package.json上右键，点击Show npm Scripts 2.打包（或者直接在项目根目录运行 npm run build 命令） 3.成功后会在项目根目录生成dist文件夹 二、压缩并上传项目到服务器（我这里是使用SecureCRT工具进行上传和部署项目的） SecureCRT版本信息如下： 1.压缩文件 2.上传文件 2.1 输入命令rz -y上传（我这里是上传到root目录下的） 若没有上传信息，可再次输入rz命...
解决vue部署到nginx后刷新404
Rsun2018的博客
04-07 156
在location标签下面添加try_files标签内容 location / { root /usr/local/nginx/html/dist; index index.html index.htm; try_files $uri $uri/ /index.html; }
vue项目部署至nginx，路由404
qq_40342969的博客
08-30 8976
vue项目部署至nginx后，页面跳转404
解决Vue项目刷新404
挨踢星球
09-05 2094
如果服务器没有正确配置，当用户直接在浏览器地址栏中输入一个历史模式的URL或者刷新当前页面时，服务器可能会尝试查找与该URL对应的物理文件，而实际上这样的文件不存在。这是因为历史模式依赖于服务器配置来确保在浏览器请求的URL没有对应的物理文件时，仍然返回应用的入口文件（通常是”index.html”）。要在使用Vue的历史模式时正确配置服务器，以确保在浏览器请求的URL没有对应的物理文件时仍然返回应用的入口文件（通常是”index.html”），需要根据你所使用的服务器类型进行相应的配置。
vue项目本地开发完成后部署到服务器后报404
weixin_50367873的博客
11-17 3215
前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后，是生成一系列的静态文件常规布署我们只需要将这个目录上传至目标服务器即可让web容器跑起来，以nginx为例配置完成记得重启操作完后就可以在浏览器输入域名进行访问了当然上面只是提到最简单也是最直接的一种布署方式什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开。
Vue项目部署后，刷新提示404
云在青天水在瓶
01-06 5842
一、遇到的问题 Vue项目打包部署到线上后，刷新页面会提示404。这是因为网页访问的是静态绝对路径，而服务器上没有该路径。 二、解决方法 方法一： 修改src/router/index.js文件中的mode属性，设置为hash。（这种调整，会使url出现"#"） 方法二： 调整nginx.conf配置文件 ...
vue发布到服务器接口404_vue部署服务器以及解决部署到apache路由出现404
weixin_39989222的博客
12-20 839
最近在开发cms的时候使用Vue.js框架，利用vue-route、vue-cli结合webpack编写了一个单页路由项目，自己在服务器端配置apache。部署完成后，访问没问题，从页面中点击跳转就会报错，就会出现404现象！在本地开发中是没有这个问题的，调试的时候一切都是正常的。步骤一：在config/index.js文件里的assetsPublicPath改成你放在服务器的文件路径里，根目录就...
Vue 项目布署后，刷新页面（或跳转页面）出现 404 解决办法
是微风，是晚霞，是无可替代
08-23 6232
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们可以发现，变的始终是内容，而容器还是那个容器。
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、付费专栏及课程。

余额充值