将打包好的VUE文件部署到Web容器（Nginx）中，解决接口调用跨域问题

目录

背景

下载并解压Nginx

部署dist到Nginx中

启动Nginx

---

背景

VUE项目开发（如何搭建VUE开发环境请参见：如何搭建VUE开发环境_chanbzou1981的博客-CSDN博客）完成后需要部署发布，建议使用Nginx作为Web容器，因为支持反向代理，能方便地解决客户端跨域调用服务端接口的问题。

什么是跨域：由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

下载并解压Nginx

下载稳定版本（nginx/Windows-1.20.2）即可。

Mainline version——主线版本

Stable version——稳定版本

Legacy versions——旧版本

nginx: download

将下载的 nginx-1.20.2.zip解压得到nginx-1.20.2文件夹。

部署dist到Nginx中

将VUE打包得到的dist中的文件拷贝到Nginx的html目录下，例如：

E:\nginx-1.20.2\html\

启动Nginx

Nginx默认监听的端口为80（在\conf\nginx.conf 文件中配置）：

    server {

        listen       80;

        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {

            root   html;

            index  index.html index.htm;

        }

双击或者在命令行窗口中运行 nginx.exe

访问http://localhost/验证部署成功（浏览网页服务默认的端口号都是80，因此只需输入网址即可，不用输入“: 80”了。）。

PS：重启或停止Nginx的方法：

1. 重启: nginx -s reload
2. 停止： nginx.exe  -s stop 或 nginx.exe -s quit