1. 背景

某些时候前端代码部署到机器之后需要通过nginx访问到前端，然后前端内部会调取axios中配置的baseurl地址（也就是后端服务的地址）。

但无奈某些时候部署的过程都是运维同学在负责，所以整个部署过程对于前端同学而言是屏蔽的。

解决这种情况，前端可以尝试在本地装一个nginx，然后把前端打包的dist目录放到本地的nginx下，然后通过查看nginx中配置的ip（localhost）和监听的端口（8080）进行访问前端页面。

2. 具体操作过程

2.1 window下安装nginx

在nginx官网直接下载解压安装。

2.2 根据环境配置进行打包

vue模式环境打包：cli.vuejs.org/zh/guide/mo…

运行如下打包命令进行打包：

yarn run build:dev

将打包的dist目录下内容拷贝到安装的nginx目录下的html中。

2.3 启动nginx进行访问

windows下启动nginx，在nginx安装目录下鼠标双击nginx.exe，会看到一个黑色弹窗一闪而过，表示nginx已经启动成功，接着在命令行cmd或者bash中切换到nginx的安装目录下，然后执行start nginx或者nginx.exe直接回车就可以了，然后在浏览器上访问localhost:8080，就会看到前端首页。

备注：

因为在windows上临时搭建了一套nginx环境,有时会重复启动好几个nginx进程,导致最新的nginx配置不生效,所以可以在命令行窗口cmd中执行一下删除命令。

taskkill /f /t /im nginx.exe

写在后面

1. 关于nginx中的location配置的root和alias区别说明

alias配置方式（alias连接index属性时，默认不在alias末尾加反斜杠）：

alias   /usr/share/nginx/html/;  
index  index.html index.htm;  

root配置方式（root连接index属性时，默认会在root后加反斜杠）:

root  /usr/share/nginx/html;  
index  index.html index.htm;

2. 修改ng对外的访问端口以及域名ip

可以通过修改nginx.conf配置文件中的server中的server_name来修改外部的访问域名；通过修改server中的listen字段来修改nginx对外的监听端口。目前是localhost所有只能在开发人员本地访问，如果是想同一个局域网内部其他机器想访问，可以修改为0.0.0.0，此时通局域网的其他机器就可以通过ng所在机器的ip进行访问。

另外：一般进行gzip传输压缩，也是在ng上配置gizp开发打开，支持gzip压缩传输，进而达到优化的效果