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;
}

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

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js