VUE 线上版本 刷新 404 (nginx解决)

最新推荐文章于 2024-10-05 18:29:28 发布
最新推荐文章于 2024-10-05 18:29:28 发布
阅读量249 收藏
点赞数
分类专栏： vue 文章标签： vue php nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyy7293/article/details/107566115
版权

原因:

采用了路由的history模式，本地项目运行，刷新子页面都是OK的。

说明下vue-router的默认hash模式——使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。但是这种hash很丑，也不符合对URL的使用习惯。所以，需要使用另外一个叫history模式来实现URL跳转而无须重新加载页面。因为我不想要很丑的 hash，就是使用路由的 history 模式.

方法一

去掉history模式，仍然采用hash模式，即注释掉这行代码
// mode:'history'

方法二

后端配置
nginx服务器 网站 - 伪静态 配置
location / {
  try_files $uri $uri/ /index.html;
}
vue开发版本和线上版本分离
jingkai0714的博客
10-25 209
做了哪些改变？ public里的index.html process.env.NODE_ENV是用来判断是否为开发版本的 分别为 production development 只有在production 时才用到cdn引入 不然平常开发时因为需要每次请求资源 所以页面渲染的慢 ​​​​ <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta htt..
vue项目线上页面刷新报404 解决方法
weixin_30540691的博客
09-17 6709
在上线vue开发的前端网页上线后，刷新页面报404错误，因为网页上显示的是静态绝对路径，实际上服务器上是没有改路径的所以刷新汇报错误。 1、vue框架中解决404 vue router mode 默认为hsas, 这样的url中带有#，如果把mode: 'history'就能去掉#号，也可以正常访问，但是再次刷新页面就会出现404错误。 const router = new Ro...
Vue 线上项目刷新页面 404
weixin_39666797的博客
09-19 469
Vue 线上项目刷新页面 404 今日测试报了一个bug，在测试服刷新当前页面404，其他没有任何错误。 Failed to load resource: the server responded with a status of 404 本地测试完全ok，各种原因查找之后是应为vue router 的原因，使用了history 模式 export default new Router({ mode: 'history', }) history模式是H5新增的api，改模式下主要有两个.
解决Vue应用中遇到路由刷新后出现 404 错误
最新发布
twins3520的博客
10-05 1166
Vue 应用中遇到路由刷新后出现 404 错误，通常是因为 Vue 应用是个单页应用（SPA），它通过 Vue Router 管理路由，通过 HTML5 History Mode 实现页面导航无需重新加载页面。使用 Hash Mode：另一种方法是使用 Vue Router 的 Hash Mode，它不需要服务器端的特别配置。选择合适的方法进行配置，即可解决 Vue 应用在路由刷新时出现的 404 错误。服务器配置：需要配置服务器，使其可以正确处理所有路由请求，并返回同一个。
Vue项目上线后，点击刷新按钮（f5）报错404的问题（使用nginx）
Honins的博客
07-30 1万+
Vue上线后，点击刷新按钮报错404问题 使用vue-cli构建的项目上服务器后，点击刷新按钮报错404问题，这个问题困扰好多天了，今天决定把它解决掉。 首先，出问题的原因是： 在 Vue 项目中，可以选择 hash或者 history.pushState() 实现路由跳转。 使用history模式的配置是： export default new Router({   mode: 'h...
vue使用axios出现Network Error或者404
热门推荐
Sobered的博客
07-06 4万+
在使用axios请求本地某个接口的时候,接口是有效的，但是控制台出现了报错: Error: Request failed with status code 404 或者控制台Network Error报错,那么下面为可能解决的方式 原因 更换url中的地址 需要将127.0.0.1换成http://localhost 本机域名识别。 在后台模块中相关ApplicationContext启动类中加入如下注解 加入@CrossOrigin注解，重新运行后台。 运行后，打印结果如下： ..
vue nginx解决刷新404问题
恨_别离的博客
05-12 290
在nginx中增加 server { listen 88; server_name 10.1.11.35; location / { root /usr/share/nginx/ev/; index index.html index.htm; //增加下面这句即可 try_files $uri $uri/ /index.html;
nginx部署vue刷新404
风水道人
03-07 98
nginx部署vue刷新404
vite vue3 histroy项目发布nginx刷新后404问题
ICEBOUND47的博客
02-17 3621
打包后发布服务能正常运行，但是刷新之后项目404 在网上找到相关配置仍然未解决为题 server { listen 80; index index.html; root /xxxx/dist; #vue-router配置 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^
Vue项目服务器部署刷新页面404
Tang__CT的博客
05-04 2884
Vue项目服务器部署刷新页面404 问题描述 在上线vue开发的前端网页部署在服务器上后，刷新页面显示404 原因 因为网页上显示的是静态绝对路径 而实际上服务器上是没有改路径的，多以导致刷新汇报错误 解决方法 在Vue框架中解决404 vue router mode 默认为hsas，这样的url中会带有#，如果改成mode:'history'就能去掉#号，也可以正常访问，但是再次率先你页面就会出现404 const router = new Router({ mode: 'history' }
vue框架下部署上线后刷新报404问题解决方案
qq_15859173的博客
01-25 402
vue框架下部署上线后刷新报404问题解决方案 Apache配置 nginx配置 vue history模式下nginx配置 原生 Node.js 基于 Node.js 的 Express Internet Information Services (IIS) Caddy Firebase 主机 最后 Apache配置 nginx配置 location / { try_files $uri $uri/ /index.html; } vue history模式下nginx配置 服务端nginx的一开始配置如下
vue+webpack 打包文件 404 页面空白的解决方法
11-30
综上所述，解决Vue+Webpack打包后404页面空白的问题，主要涉及到服务器配置（如Nginx的try_files规则）、静态资源路径设置（通过Vue CLI的`publicPath`）以及Babel的正确配置（`.babelrc`文件）。通过调整这些配置，...
Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时，Nginx的配置方式
向心行者
07-06 4420
History 模式时，服务器需要进行相应的配置，以确保在刷新页面或直接访问某个子路由时，仍能正确返回前端路由对应的页面。这是因为在 History 模式下，前端的路由和后端的路由是分离的，后端需要将所有路由请求都重定向到前端的入口页面。在 Vue Router 中，Hash 模式是一种简单且常见的路由模式，它使用 URL 中的哈希（#）来管理路由。然后，修改路由配置文件./router/index.js，在该文件我们配置了History 模式，同时还需要配置base路径，保证路由访问时的正确。
vue 项目 页面刷新404问题
q1ngqingsky的博客
04-22 1万+
vue页面访问正常，但是一刷新就会404的问题解决办法： 第一种解决方法： 将vue路由模式mode: 'history' 修改为 mode: 'hash' //router.js文件 const router = new Router({ //mode: 'history', mode: 'hash', routes: [ { path: '/', redirect: '/login' }, { path: '/login', compon
Nginx解决history模式下页面刷新404
小陈的博客
10-24 6227
本来只是一个自己部署项目问题的排查，实际只需要一行代码就能解决问题，但解决问题只是最基础的。更需要的是通过这个问题去补充更多自己不了解的东西。只有这样才能学的更多，不能只是头痛医头，脚痛医脚🫡。整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
nginx配置history模式路由
qq_42451776的博客
08-06 5911
对nginx配置文件.conf修改 server { listen 80; server_name www.xxx.com; location / { index /data/dist/index.html; try_files $uri $uri/ /index.html; } } 重启 nginx -s reload 前端路由添加404页面 这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件 为了避免这种情
vue项目刷新当前页面的三种方法
weixin_52065173的博客
09-15 8720
vue项目刷新当前页面的三种方法
解决VUE项目发布NGINX下刷新404问题
u014572906的博客
08-14 115
打包前台项目部署后，刷新提示404 一开始以为是代码问题 后来逐个分析发现是nginx拦截请求问题 在nginx.conf配置文件中，配置如下内容即可 try_files $uri $uri/ /index.html; location / { root E:\wyf\vs\dist; index index.html index.htm; try_files $uri $uri/ /index.html; //关.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值