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

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

相关推荐
小桥风满袖19 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花19 小时前
i18n国际语言化配置
前端
编程贝多芬19 小时前
Promise 的场景和最佳实践
前端·javascript
Asort19 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio19 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗19 小时前
JS的对象属性存储器
前端
Lotzinfly19 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果19 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
开源之眼19 小时前
React中,useState和useReducer有什么区别
前端
普郎特19 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript