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


相关文章
|
前端开发 JavaScript 数据可视化
Vue项目打包完后如何自动上传至服务器
Vue项目打包完后如何自动上传至服务器
1255 0
Vue项目打包完后如何自动上传至服务器
|
5月前
|
JavaScript
vue多页面系统配置步骤
vue多页面系统配置步骤
33 0
|
5月前
|
JavaScript Java Maven
Vue2 脚手架下载及配置淘宝镜像--和ieda的配置和打开
Vue2 脚手架下载及配置淘宝镜像--和ieda的配置和打开
247 0
Vue2 脚手架下载及配置淘宝镜像--和ieda的配置和打开
|
5月前
|
存储 JavaScript
vue+vant制作登录登出个人页面
vue+vant制作登录登出个人页面
301 0
|
5月前
|
JavaScript
vue上传宝塔退出页面404
vue上传宝塔退出页面404
46 0
|
JavaScript
宝塔面板部署vue项目
宝塔面板部署vue项目
877 0
|
JavaScript
解决vue刷新报404的详细教程
解决vue刷新报404的详细教程
|
JavaScript 前端开发
Vue和React项目上传宝塔刷新404解决方法
Vue和React项目上传宝塔刷新404解决方法
239 0
|
JavaScript 前端开发 编译器
傻瓜式搭建一个vue项目的完整步骤
傻瓜式搭建一个vue项目的完整步骤
205 0
|
前端开发 JavaScript Java
react 打包后,项目部署完毕,刷新页面报错(404)
react 打包后,项目部署完毕,刷新页面报错(404)
419 0