宝塔nginx运行vue项目刷新404问题解决

我的项目是webpack构建的,因为我做一切开发都想要希望要从一个标准的构建去编码

所以,我的项目在node下运行,开发,调试是没有一点问题的,npm run build也是完全OK的,vue路由是history模式

把build出来的dist文件夹部署到生产环境,使用nginx的时候,问题就来了

我的问题描述:

如果从首页打开,点击任何页面都能够正常访问,而当你处在某个页面(非首页)的时候,刷新就出现了404错误。这就很尴尬了。

通过不断调试思考,最终我查到了两个解决方法,以供需要的兄弟参考,适合使用宝塔管理的兄弟

以下两种解决方法的前提是,要把dist里面的文件全部拷贝到nginx服务器的根目录下,否则配置起来会麻烦很多,就是每个路由节点都要添加下面的解决代码。

比如你dist文件放在这个网站目录下/aaa/bbb/dist,

这时候,就要在server /aaa {}配置一遍,server /aaa/bbb {}配置一遍

如果非要在根目录的多级目录下配置站点,可以参考这个博客:https://www.cnblogs.com/haonanZhang/p/9791983.html

第一个解决方法:如下图,直接在nginx配置文件里加上404处理

这样就解决了报404的时候,原理是nginx在catch到404错误后路由才重新解析url,但是它有个可以忽略的小问题就是,404的错误在浏览器调试界面的网络请求列表里还能看到

第二个解决方法:如下图  配置一个url重写

它可以解决第一种方式中出现的小问题,原理是nginx在catch到404错误前就重写了url

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413319.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode设置中文,设置中文不成功问题

刚安装好的vscode界面显示英文,如何设置中文呢? 在locale.json界面设置”locale":"zh-cn"也未能实现界面为中文,在网上找了参考了,以下教程真实测试有效! 首先: 下载插件:Chines…

网页Request Headers请求头和Response Headers响应头

Request Headers Accept:告诉服务器,客户机支持的数据类型 Accept-Encoding:告诉服务器,客户机支持的数据压缩格式 Cache-Control:缓存控制,服务器通过控制浏览器要不要缓存数据 Connection:处理完这次请求,是断开…

springboot+jpa+mysql+redis+swagger整合步骤

springbootjpaMySQLswagger框架搭建好之上再整合redis: 在电脑上先安装redis: 一、在pom.xml中引入redis 二、在application.yml里配置redis,单独说明:redis刚一开始安装好是没有设置密码的。否则,会报connection错误。…

python3下使用requests实现模拟用户登录 —— 基础篇(马蜂窝)

我是从这篇博客中(https://blog.csdn.net/zwq912318834/article/details/79571110)了解的一点基础东西,代码都是从这篇博客里面的源代码直接复制过去测试和学习的。 遇到的问题: 1、返回状态码:502——百度得知这是一…

ACM-ICPC 2018 焦作赛区网络预赛 H题 String and Times(SAM)

Now you have a string consists of uppercase letters, two integers AA and BB. We call a substring wonderful substring when the times it appears in that string is between AA and BB (A \le times \le BA≤times≤B). Can you calculate the number of wonderful sub…

[css] css的height:100%和height:inherit之间有什么区别呢?

[css] css的height:100%和height:inherit之间有什么区别呢? 上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少: 微博inherit无节操段子 不过inherit确实是个好东西,不仅节约代码,尤其与background之流打交…

http详解 请求报文格式和响应报文格式

题外话: 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人,信不信未来的PI,了解一下,唯一一个高度与之持平的项目 HTTP 工作原理 超文本传输协议(Hypertext Transfer Protocol,简称HTT…

【LeetCode】拓扑排序

【207】 Course Schedule 排课问题&#xff0c;n门课排课&#xff0c;有的课程必须在另外一些课程之前上&#xff0c;问能不能排出来顺序。 题解&#xff1a;裸的拓扑排序。参考代码见算法竞赛入门指南这本书。 1 class Solution {2 public:3 bool dfs(const vector<vec…

pycharm中更新pip版本的问题

经常使用Python的都知道pip&#xff0c;但有时候&#xff0c;下载某个模块不成功&#xff0c;提示信息如下 pytharm查看自带的pip版本 解决方式一&#xff1a; pytharm的terminal里卸载pip再安装pip 如果还不行&#xff0c;解决方式二 去你当前的项目路径下找到lib文件夹下的…

小程序的wx.onAccelerometerChange

https://www.2cto.com/kf/201802/724174.html&#xff08;copy&#xff09; 也许有人会问&#xff0c;小程序中都是竖直app形态&#xff0c;要横竖屏判断有什么用?即使判断出了横屏状态&#xff0c;你能把小程序横过来?答案是不能的&#xff0c;但是判断当前设备处于横屏或者…

Django通过中间件实现登录验证demo

前提&#xff1a;中间件版的登录验证需要依靠session&#xff0c;所以数据库中要有django_session表。 1 from django.conf.urls import url2 from django.contrib import admin3 from app01 import views4 5 urlpatterns [6 url(r^admin/, admin.site.urls),7 url(r^…

Python爬虫自学之第(③)篇——实战:requests+BeautifulSoup实现静态爬取

题外话&#xff1a; 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人&#xff0c;信不信未来的PI&#xff0c;了解一下&#xff0c;唯一一个高度与之持平的项目 前篇全片都是生硬的理论使用&#xff0c;今天就放个静态爬取的实例让大家体验一下B…

Python爬虫自学之第(④)篇——强大的正则表达式,re模块

题外话&#xff1a; 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人&#xff0c;信不信未来的PI&#xff0c;了解一下&#xff0c;唯一一个高度与之持平的项目 如果把BeautifulSopu比喻成通过线索一步步接近目标的侦探的话&#xff0c;那么正则…

Python爬虫自学之第(⑤)篇——爬取某宝商品信息

题外话&#xff1a; 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人&#xff0c;信不信未来的PI&#xff0c;了解一下&#xff0c;唯一一个高度与之持平的项目 能看到这里说明快进入动态网页爬取了&#xff0c;在这之前还有一两个知识点要了解&…

Vue通信、传值的多种方式,详解

Vue通信、传值的多种方式&#xff0c;详解 转自&#xff1a;https://blog.csdn.net/qq_35430000/article/details/79291287 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件&#xff08;触发事件可以是点击事件、钩子函数等&#xff09; this.…

python 文件读写(追加、覆盖)

很明了的一个常用参数图标&#xff1a; 更像细的一个参数说明&#xff1a; 由于文件读写时都有可能产生IOError&#xff0c;一旦出错&#xff0c;后面的f.close()就不会调用。所以&#xff0c;为了保证无论是否出错都能正确地关闭文件&#xff0c;我们可以使用try ... finally来…

前端知识点总结

1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。(通俗易懂的来讲讲DOM、两个节点之间可能存在哪些关系以及如何在节点之间任意移动) DOM: Document Object Module, 文档对象模型。 节点的关系:父(parent)、子(child)和同胞(sibling)等节…

Python爬虫自学之第(①)篇——爬虫伪装和反“反爬”

有些网站是防爬虫的。其实事实是&#xff0c;凡是有一定规模的网站&#xff0c;大公司的网站&#xff0c;或是盈利性质比较强的网站&#xff0c;都是有高级的防爬措施的。总的来说有两种反爬策略&#xff0c;要么验证身份&#xff0c;把虫子踩死在门口&#xff1b;要么在网站植…

Spring 事务相关及@Transactional的使用建议

使用步骤&#xff1a; 步骤一、在spring配置文件中引入<tx:>命名空间<beans xmlns"http://www.springframework.org/schema/beans" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns:tx"http://www.springframework.org/schema/…

谷歌浏览器安装Vue Devtools插件(国内的谷歌浏览器如何安装插件)

分享给大家一个谷歌插件网站&#xff0c;适合国内谷歌浏览器无法安装插件的问题&#xff0c;你懂的 点击这里下载Vue.js Devtools插件&#xff0c; 喜欢的可以收藏这个插件资源网站&#xff0c;分享给大家 第一步&#xff1a;下载后解压获得CRX文件&#xff0c;如下图 第二步…