VUE项目部署服务器之后刷新页面异常

情况:

vue项目在本地完美运行,经过npm run build之后把dist目录上传到服务后。只有访问文件跟目录可以运行,但刷新之后会找不到相应的页面。

网上都说是hository路由的问题导致,需要修改成hash模式。如果不想修改为hash模式,需要修改服务器路由匹配规则。以nginx为例:

网上都是说改成

复制代码
location / {
    try_files $uri $uri/ /index.html;
}

这个在大多数项目是可行的。但对我的项目不行,因为我的项目既有前端页面,也有后台接口,两个都部署在同一个服务器中。

并且后台接口的项目已经做了路由伪静态。因此伪静态跟try_files要一起改才能生效

复制代码
#以admin开头的请求重写到入口文件
location /admin/ {
    try_files $uri $uri/ /admin/index.html;
}

#伪静态文件修改成:
if (!-e $request_filename) {
    #rewrite  ^/(.*)$  /index.php/$1  last; #这个是一开始的伪静态
    rewrite ^/adminapi(.*)$ /index.php/adminapi$1 last;
    rewrite ^/api(.*)$ /index.php/api$1 last;
    break;
}

两边都修改完成之后,完美运行,刷新也正常了

相关推荐
fruge1 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician2 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手4 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng5 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科6 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20166 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20098 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔8 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼8 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder8 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js