NGINX 安装包安装使用 VUE项目打包部署刷新404

wyangue

已于 2023-10-27 11:11:16 修改

阅读量347

点赞数

于 2023-08-28 17:19:10 首次发布

本文链接：https://blog.csdn.net/wyangue/article/details/132542034

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了为何选择NGINX而非Tomcat，以及如何安装和配置NGINX以支持高并发的静态资源处理。重点讲述了如何部署Vue项目，包括打包、配置文件调整和常见命令使用。还讨论了nginx配置中的注意事项和问题解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

为什么使用NGINX

提示：这里可以添加本文要记录的大概内容：

如果再不做系统调优的情况下，tomcat一般支持并发并不高100个差不多了；nginx在静态方面支持并发轻松达几万。（主要是大伙用的nginx没用tomcat肯定是有原因的，随大流）

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装NGINX

1.下载安装包

链接: http://nginx.org/download/
我下载了比较新的NGINX
在这里插入图片描述

2.安装

1.解压后进入nginx根目录下

![在这里插入图片描述](https://img-blog.csdnimg.cn/082c5afb186741eeb94318c68cdfe468.p

2.使用命令安装nginx

./configure --prefix=(安装目录)
make && make install #执行目录中的makefile文件

3.nginx目录

可以看到sbin文件夹
在这里插入图片描述

4.常用命令

sbin/nginx  #启动
sbin/nginx -t #启动检测，可以看看配置参数
sbin/nginx -s stop  #停止
sbin/nginx -s reload #重新加载配置文件（重启）

5.查看是否启动成功

如果是默认文件
启动后进入对应的IP:80，可以看到nginx的欢迎页面
在这里插入图片描述

二、部署VUE项目

1.打包上传vue项目

npm run build

打包后可以看到dist文件夹
上传到nginx的目录下的html文件夹中
在这里插入图片描述

2.修改配置文件(错版)

进入conf，修改nginx的配置文件（展示部分）
这是一种方法，可以解决刷新404的问题。

server {
        listen       8282;
        server_name  localhost;
	   root  html;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
#            root   html/dist;
            index  index.html index.htm;
#            try_files $uri $uri/ /index.html;
            access_log  logs/host.access.log;
            error_log  logs/host.error.log;
            if ($request_filename ~* .*.(html|htm)$) {
              expires -1s;
              add_header Cache-Control "no-cache, no-store, private, must-revalidate, proxy-revalidate";
            }
            if (!-e $request_filename){
              rewrite ^/(.*) /dist/index.html last;
            }
            
        }
        location /api/ {
        proxy_pass http://localhost:8283/;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Real-Port $remote_port;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        client_max_body_size 1000m;
        proxy_read_timeout 120s;
        proxy_next_upstream off;
    }

修改后执行重启命令

sbin/nginx -s -reload

部分代码不大懂,应该也是用来解决刷新404的问题的。

            if ($request_filename ~* .*.(html|htm)$) {
              expires -1s;
              add_header Cache-Control "no-cache, no-store, private, must-revalidate, proxy-revalidate";
            }
            if (!-e $request_filename){
              rewrite ^/(.*) /dist/index.html last;
            }