TypechoJoeTheme

知了博客 - 记录生活,分享技术

统计
登录
用户名
密码

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

2019-12-27
/
6 评论
/
2,235 阅读
/
正在检测是否收录...
12/27

教程适用于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;
    }
}
vuenginx
朗读
赞 · 0
版权属于:

知了博客 - 记录生活,分享技术

本文链接:

https://www.ydyno.com/archives/1215.html(转载时请注明本文出处及文章链接)

评论 (6)
  1. zxiaozhou 作者
    MacOS · Google Chrome

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

    2020-05-26 回复
    1. Mr. Zheng 作者
      MacOS · Google Chrome
      @zxiaozhou

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

      2020-06-04 回复
  2. zxiaozhou 作者
    MacOS · Google Chrome

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

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

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

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

    2020-05-26 回复
  3. zxiaozhou 作者
    MacOS · Google Chrome

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

    2020-05-26 回复
  4. 且行且叹 作者
    Windows 7 · Google Chrome

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

    2020-01-17 回复
    1. jinxyu 作者
      Windows 10 · Google Chrome
      @且行且叹

      怎么部署 我连部署都不会

      2020-04-27 回复