vue项目上传宝塔刷新页面报404

简介: vue项目上传宝塔刷新页面报404

由于vue是单页面程序,当router模式设置为 history 时,直接打包上传宝塔,在页面刷新的时候会报404的错!

因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

解决方法:

7643b91fec2845ebbb134d9e2e36acfa.png在配置中写入此代码:

location / {
      try_files $uri $uri/ /index.html;
    }

切记:在这里的内容替换不需要填写,当时我填写的时候宝塔的Nginx强制关闭

会报此类错误


4b7718ef9db449348c7b1aa594ad4330.png

解决方法:


5c574a5c266e44a7a77202a04bdf2a46.png


相关文章
|
6月前
|
JavaScript 前端开发 应用服务中间件
Vue项目如何进行部署?是否有遇到部署服务器后刷新404问题?
Vue项目如何进行部署?是否有遇到部署服务器后刷新404问题?
204 0
|
前端开发 JavaScript 数据可视化
Vue项目打包完后如何自动上传至服务器
Vue项目打包完后如何自动上传至服务器
1263 0
Vue项目打包完后如何自动上传至服务器
|
6月前
|
JavaScript
Vue项目中强制刷新页面的方法
Vue项目中强制刷新页面的方法
111 0
|
6月前
|
存储 JavaScript
vue+vant制作登录登出个人页面
vue+vant制作登录登出个人页面
367 0
|
6月前
|
JavaScript
vue上传宝塔退出页面404
vue上传宝塔退出页面404
53 0
|
JSON JavaScript 前端开发
【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建
【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建
90 0
|
JavaScript
宝塔面板部署vue项目
宝塔面板部署vue项目
908 0
|
JavaScript
解决vue刷新报404的详细教程
解决vue刷新报404的详细教程
|
JavaScript 前端开发
Vue和React项目上传宝塔刷新404解决方法
Vue和React项目上传宝塔刷新404解决方法
251 0
|
JavaScript 前端开发 编译器
傻瓜式搭建一个vue项目的完整步骤
傻瓜式搭建一个vue项目的完整步骤
210 0
下一篇
无影云桌面