分享每一天-Nginx 部署 Vue 项目,刷新 404 的问题

Nginx 部署 Vue 项目,刷新 404 的问题

前端技术 1199 0 创建时间：2022-12-09 14:32:37

nginx vue 刷新404

## Nginx 部署 Vue 项目,刷新后页面404 的问题

前端vue项目将打包生成好的 dist。Nginx 部署项目
将命名好的 admin 前端项目放到 Nginx 的 html 目录下去.

#### 修改 Nginx 配置文件

现在我们需要修改一下 Nginx 的配置文件 nginx.conf
配置改动：

- 端口号为   9200

- 服务名称为 localhost

- root目录为 html

- location地址为 /admin

- 处理前台路由 history 模式刷新 404 的问题

```php
http {
   server {
        # 监听的端口号
        listen       9200;

# 服务名称 生产环境要修改成 公网ip 如 47.105.134.120
        server_name  localhost;

# 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
        root html;

# 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面 , 刷新页面就不报404了
        location / {
            try_files $uri $uri/ /index.html;
        }
        # 配置我们的 admin 的前台服务 比如 47.105.134.120:8080/admin/index.html
        location ^~ /admin {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            try_files $uri $uri/ /admin/index.html;
        }
        # 如果你想配置多个项目的话，可以复制上面的，修改一下就可以同时部署多个前端项目了
        # 比如
        # location ^~ /blog {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            # try_files $uri $uri/ /blog/index.html;
        # }
        #error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

include servers/*;
}
```

Nginx 部署 Vue 项目,刷新 404 的问题

商品推荐

广告推荐

推荐文章