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

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

相关推荐
浪裡遊30 分钟前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿31 分钟前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj31 分钟前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝41 分钟前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3111 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion1 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜1 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾1 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*1 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm
wuhen_n1 小时前
CSS元素动画篇:基于当前位置的变换动画(一)
前端·css·html·css3·html5