前端工程部署到nginx(openresty)后刷新404问题

2,598 阅读1分钟

问题解决

本工程为vue工程,打包后,将dist文件夹下文件,移动至nginx下 html 目录

location / {
        root   html;
        index  index.html index.htm;
    }

打开 指定域名后 页面正常,进行刷新后出现404.

添加配置 try_files 后正常显示。

    location / {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

当用户请求 http://localhost:8080/admin 时,会寻找admin文件夹下的内容。

实际情况 我们没有admin文件夹,于是出现了404找不到。 添加try_files后 $uri 就是/admin.如果不存在 则去 后面的选项寻找。 最终会在 /index.html 中找到。

问题扩展

现有两个前端工程,需要在相同域名下部署。如admin 管理端,user 用户端

管理端 http://localhost:8080/admin

客户端 http://localhost:8080/user

前端工程配置路由 admin

const createRouter = (): Router =>
  new Router({
    mode: "history", 
    base: '/admin/',
    routes: constantRoutes
  });

配置webpack的publicPath 属性

module.exports = {
  publicPath: '/admin/'
  ...
}

打包后 看到dist中的index.html入口文件 中一个资源引用如下。

<link href=/admin/css/chunk-elementUI.99074003.css rel=stylesheet>

另一个user工程做相同配置,不再赘述。

把两个打好包的文件,放入 nigin 的 root文件夹下,本例为html文件夹。

在改文件夹下新建admin文件夹,user文件夹。放入工程,即可。

重启nginx的时机自己看着就行,这里也不说了。