解决 Vue 在 History 模式部署在 Nginx 上刷新报 404 的问题

解决 Vue 在 History 模式部署在 Nginx 上刷新报 404 的问题

Mr. Zheng
2019-12-27 / 6 评论 / 3,124 阅读 / 正在检测收录...
温馨提示:
本文最后更新于2021年01月25日,已超过246天没有更新,若内容或图片失效,请留言反馈。

教程适用于history模式,假设域名假设为:auauz.net

原配置

server {
    listen 80;
    server_name auauz.net;
    root /www/wwwroot/eladmin-web/dist;
    index index.html;
    error_page 404 /index.html;
}

修改如下

server {

    listen 80;
    server_name auauz.net;
    
    location / {
        root /www/wwwroot/eladmin-web/dist;
        index index.html;
        try_files $uri $uri/ @router;
        index index.html;
    }
    
    location @router {
        rewrite ^.*$ /index.html last;
    }
}
0

评论 (6)

取消
  1. 头像
    zxiaozhou
    MacOS · Google Chrome

    一般mode: 'history',模式基本用在前后端一起打包,前端请求路径需要后台接口支持的才用。

    回复
    1. 头像
      Mr. Zheng 作者
      MacOS · Google Chrome
      @ zxiaozhou

      怎么说呢,就是看不惯地址栏出现 /#/

      回复
  2. 头像
    zxiaozhou
    MacOS · Google Chrome

    针对刷新404最好的解决方式,避免重新nginx

    1.publicPath设置为:./ (使用相对路径)

    2.mode: 'history'注释掉,或者改为mode: 'hash'

    从此不用配置nginx地址重写,作者启用了非hash路由。整出一大堆问题

    回复
  3. 头像
    zxiaozhou
    MacOS · Google Chrome

    为啥原始element-admin可以不用修改,原始直接改publicPath为“./",但是你这个却要在nginx搞地址重写,element-admin使用相对路径请求时会自动加上文件夹名称的,即如果放在dist目录下,所有资源路径都会自动加上dist,但是不知道为啥element-admin在你这部署却变得这么麻烦

    回复
  4. 头像
    且行且叹
    Windows 7 · Google Chrome

    请问,el-admin 项目部署后,浏览器刷新后报错 : Full authentication is required to access this resource ,所有的页面都是这样。这是啥子原因呢?
    谢谢!

    回复
    1. 头像
      jinxyu
      Windows 10 · Google Chrome
      @ 且行且叹

      怎么部署 我连部署都不会

      回复