vue刷新页面404

在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 ]