解决vue刷新报404的详细教程

1.首先进入宝塔页面(在左侧导航栏中找到“网站”)

 2.进入--找到自己的域名

3.点开自己的域名--找到配置文件

4. 在配置文件内容中输入

输入 :

 location / {
       try_files $uri $uri/ /index.html;
      }

如果这里没有添加反向代理的话是没有这一项的,一般vue项目都是需要添加反向代理的

输入这串代码即可解决上传到服务器后刷新页面报错404的问题,可以尝试一下。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue开发中,当页面上线后刷新页面可能会出现404错误的问题。这是因为Vue默认使用的是hash模式(mode: 'hash'),在URL中带有#号。虽然页面可以正常访问,但是再次刷新页面会出现404错误。为了去掉URL中的#号,可以将路由模式改为history模式(mode: 'history')。使用history模式后,需要修改nginx配置文件来解决刷新页面404的问题。 具体操作步骤如下: 1. 在Vue项目中,创建一个新的Router实例时,将模式设置为history模式,即mode: 'history'。 2. 修改nginx配置文件,添加以下代码: ``` location / { try_files $uri $uri/ /index.html; # 解决页面刷新404问题 } ``` 3. 保存并退出nginx配置文件。 4. 验证nginx配置文件是否正确:运行命令`../nginx -t`。 5. 重启nginx:运行命令`../nginx -s reload`。 请注意,修改完nginx配置文件后必须要重启nginx,否则修改将不会生效。 总结:以上方法主要针对Vue开发中刷新页面出现404错误的问题进行解决。需要注意的是,在使用路由导航时(如使用<router-link>或编程式导航),Vue Router会自动处理路由切换并避免出现404错误。以上处理方式主要是针对直接刷新页面时可能出现的404问题。如果您需要更详细解决方案,可以参考和提供的链接文档。 引用: 文章链接:https://www.cnblogs.com/ling-yu-amen/p/11533726.html Vue Router官方文档及路由导航处理<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue项目线上页面刷新404 解决方法](https://blog.csdn.net/wwppp987/article/details/118968859)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue项目刷新404处理方式](https://blog.csdn.net/m0_71966801/article/details/131753529)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue下使用nginx刷新页面404的问题解决](https://download.csdn.net/download/weixin_38746166/12938391)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值