vite脚手架打包并部署到服务器，nginx配置入门

一、申请服务器：

腾讯云服务器购买和部署

Windows Server 购买部署步骤详解

二、打包

npm run build

默认打包结果在项目目录下的dist目录下

三、部署到nginx：

1、在你的申请服务器上安装nginx。

2、把dist目录下的文件，放在nginx下的html文件夹下。

如何放：不同的服务器（如：腾讯云，阿里云）做法不同，具体可以看腾讯云官网（或者百度）；

四、nginx配置：（conf/nginx.conf文件）

1、服务器ip地址（域名）和端口号

​
http {
    …………………………
​
    server {
        listen       8081;  端口号
        server_name  10.36.188.104;  ip地址或者域名
​
         …………………………
    }
​
}
​

2、指定（网站）的路径

​
http {
    …………………………
​
    server {
        ………………………………
        
        以下表示：当你访问根路径时，会去html文件夹查找文件，默认打开的页面名字依次为 index.html index.htm default.html。
        location / {
            root   html;
            index  index.html index.htm default.html;
        }
​
​
        ………………………………
​
    }
​
}
​

3、反向代理：

http {
    …………………………
​
    server {
      
 以下表示：凡是以  /api2306 开头的请求，都转到http://121.89.205.189:3000。并删除掉 /api2306
        
         location ~ ^/api2306/ {
             proxy_set_header        Host $host;
             proxy_set_header        X-Real-IP $remote_addr;
             proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header        REMOTE-HOST $remote_addr;
             
             rewrite ^/api2306/(.*)$   /$1 break;
             proxy_pass             http://121.89.205.189:3000;
        }   
    }
​
}

4、404页面和其它响应状态码对应的页面配置。

http {
    …………………………
​
    server {
        ……………………
         
        以下表示：如果找不到对应的文件（404）,那么就去访问 /index.html 。并指定了 /index.html在html文件夹下【此处为什么这样配置，请回忆：history模式和hash的区别（跟后端相关的区别）】
        
        error_page 404              /index.html;
        
        location = /index.html {
            root   html;
        }
​
      以下表示：http响应状态码为500 502 503 504  时，都去找 /50x.html。并指定了 /50x.html 在html文件夹下。
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
​
    }
​
}

补充：

       在路由模式区别，有跟后端（服务器端）有关的配置，也就是nginx的配置，就是上面的404页面的配置。此处特指部署后前后端依然是分离的情况：

路由模式分为两种：hash和history：

区别（面试题）：

1）、外观上

​    hash模式时，路径上有#。

​    history模式时，路径上没有#。

2）、原理上

hash：location.href结合 window.onhashchange事件。

history：history.pushState()

3）、跟后端有关的区别

hash模式：跟后端没有关系。解释：不会给后端发请求。因为hash就是锚点连接(页内连接)

history模式：需要服务器端（nginx）配合，服务器端会做好。解释：

​      前后端分离场景：请求页面时，会找前端服务器（一般是nginx），如果在nginx（的html文件夹）里没有提供路径对应的文件，那就会报404。此时，需要给nginx里配置404页面为index.html。

​     前后端不分离的场景：当你给后端发送请求时， 要在服务端（不一定是nginx服务器，后端服务器如：tomcat）增加一个覆盖所有情况的候选资源（需要给服务器里配置404页面为index.html）。否则，就会返回404。如果后端有同名的url，那么就会找后端的url。