宝塔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

宝塔nginx运行vue项目刷新404问题解决相关推荐

Nginx 部署 Vue 项目刷新页面出现404
问题使用Vue.框架,利用vue-route编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
记一次升级node版本后，运行原vue项目报错问题解决方法
记一次升级node版本后,运行原vue项目报错问题解决方法参考文章: (1)记一次升级node版本后,运行原vue项目报错问题解决方法 (2)https://www.cnblogs.com/happ ...
新装linux系统(centOs7)使用nginx驱动vue项目
新装linux系统(centOs7)使用nginx驱动vue项目配置linux环境 centos安装nginx 安装nginx前首先要确认系统中安装了gcc.pcre-devel.zlib-deve ...
Ubuntu 下搭建 Nginx 部署 vue 项目
Ubuntu 下搭建 Nginx 部署 vue 项目上一篇:Ubuntu 下部署 SpringBoot 第一步: Ubuntu 上安装 nodejs 执行 apt install nodejs 命令 ...
如何运行vue项目？(详解，建议收藏) ❤️
如何运行vue项目 (详解,建议收藏) 转载首先,列出来我们需要的东西: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像安装node.js 从no ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
Centos+Nginx部署Vue项目
Centos+Nginx部署Vue项目 1.项目打包生成dist文件夹在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到cento ...
vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下. 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时 ...

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

宝塔nginx运行vue项目刷新404问题解决相关推荐

最新文章

热门文章