vite vue3 histroy项目发布nginx刷新后404问题

睿智哈

已于 2022-10-19 17:02:14 修改

阅读量3.5k

点赞数 1

分类专栏： vue 文章标签： nginx vue.js

于 2022-02-17 16:54:39 首次发布

本文链接：https://blog.csdn.net/icebound47/article/details/122986934

版权

博客讲述了在使用Vite构建Vue3项目并部署到Nginx服务器后，遇到刷新页面出现404错误的问题。主要内容包括：在刷新页面时，由于请求的HTML文件不存在，导致404错误。解决方案是通过修改Nginx配置文件中的try_files指令，确保正确指向打包后的静态资源。

摘要由CSDN通过智能技术生成

打包后发布服务能正常运行，但是刷新之后项目404

主要是当我们刷新是会重新去请求html文件

比如当我们访问 www.myproject.com时候请求 src/index.html

这时候我们通过菜单进入登录 www.myproject.com/login 页面能正常渲染

但是如果我们F5刷新页面就会404 因为刷新后重新加载html。www.myproject.com/login 会去找我们的src/login/index.html
实际这个文件是不存在的所以404

解决办法获取html文件的时候try_files修正路径,root定义try_files的相对目录


server {
   
  listen 80;
  client_max_body_size 10M;
  root /opt/app/myproject;
  index /opt/app/myproject/s

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

睿智哈

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决vue项目nginx部署到非根目录下刷新空白的问题

12-09

1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

vue history模式部署nginx，刷新404

weixin_47215286的博客

06-22

1147

原因：刷新是请求地址栏url，单页面应用，静态服务器自然没有这个静态资源，就报了404.解决：nginx设置转发解释：try_files：依次检查，检查到就转发到这里。

3 条评论您还未登录，请先登录后发表或查看评论

Nginx使用vite部署vue3项目页面刷新404

weixin_41705627的博客

09-04

4743

最近使用vue3的vite构建了一个新项目，在本地测试时是好好的没有什么问题，但是一发到服务器上刷新页面就会出现404，这样肯定会导致用户体验非常不好，于是我开始翻阅资料，找到几种处理方法

vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题

最新发布

半只

08-23

474

默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上例如。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在，则设置 base需要配置为/demo/这个问题只有路由模式为才会出现，如果使用的是这样的路由则不会出现。

vue3+ts+history路由模式项目打包部署后刷新显示页面404

qq_57483942的博客

05-08

1459

最近本博主的做了一个医疗的前端开发项目，已经完工了，下面是对部署过程的总结和项目打包部署后刷新显示页面404问题的解决方案。

nginx 部署vue3项目页面404

sinat_37012541的博客

04-30

2687

vue3 vite 部署到nginx 刷新404 500等问题处理

记录Vite3打包发布后刷新总是跳转到404页面问题的解决

nnslyx的博客

09-24

4094

配置nginx设置，解决Vite3打包发布后刷新总是跳转到404页面的问题

vite2.0+vue3.2部署Nginx 刷新404

默存

07-01

1795

在本地运行没问题，部署到服务器上，能正常访问，但是刷新之后页面404

Vue 基于vite构建vue3项目以及基础语法演示

07-17

Vue 基于vite构建vue3项目以及基础语法演示Vue 基于vite构建vue3项目以及基础语法演示Vue 基于vite构建vue3项目以及基础语法演示Vue 基于vite构建vue3项目以及基础语法演示Vue 基于vite构建vue3项目以及基础...

vite+vue3使用模块化批量发布Mockjs接口

03-29

"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...

vue3+vite创建项目-（傻瓜式教程）

01-19

Vue3 + Vite 创建项目教程 Vue.js 是一个流行的前端框架，它的最新版本Vue3引入了许多新特性，如Composition API、Suspense、Teleport等，提供了更好的性能和更灵活的开发体验。Vite是由Vue.js作者尤雨溪开发的一款...

vue项目部署到nginx 上刷新页面显示404

qq_30517167的博客

07-25

1921

在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。

vuecli3 & nginx配置刷新页面后页面404问题

学而不思则罔思而不学则殆

03-24

474

nignx配置进行修改：根目录设置方式： location / { root html; index index.html index.htm; if (!-e $request_filename) { rewrite ^(.*)$ /index.html?s=$1 last; break; } } 非目录设置方式： location /xxx/ { alias

在NGINX部署了vite + vue3 + vueRouter4项目后，出现404问题的解决办法，包括配置了try_files后，刷新仍然404的解决办法

x_bai_IT的博客

05-10

609

我的项目使用的是vite+vue3+vueRouter4，项目打包后项目部署在nginx服务器中，出现刷新404问题，根据vue-router文档添加try_files后刷新仍然404。

【问题记录】解决vite多页应用路由改用history之后本地刷新404问题

Kuroko's Development Notes

05-30

3166

当前项目是一个多页应用配置，将路由从默认的hash模式改为history模式之后，本地开发环境刷新页面404

vue项目部署到nginx上history模式出现404

二饭的博客

07-06

363

我的解决方式如下，可以参考一下我的解决方案。 1、创建路由对象 // 路由对象 export default new VueRouter({ mode:'history', routes: router }); 2、配置vue.config.js 没有这个文件就创建一个，位置和babel.config.js同级 module.exports = { publicPath: '/', //这个必须，引入静态资源需要从根路径引入，否则会找不到静态资源 dev

Vite3打包发布后刷新总是跳转到404页面问题的解决

weixin_44492855的博客

03-10

1834

解决办法：

Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题（完整步骤）（亲测有效）

mrliucx的博客

02-21

3051

Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题（完整步骤）（亲测有效）

vue3+ts+vite项目nginx部署

04-16

要将Vue3 + TypeScript + Vite项目部署到Nginx服务器上，可以按照以下步骤进行操作： 1. 构建项目：在本地开发环境中，使用Vite构建工具将Vue3 + TypeScript项目打包成静态文件。在项目根目录下运行以下命令： ``` ...