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

金色浪花2024-11-29 15:00

情况：

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

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