windows服务器采用Nginx部署Vue前端项目注意事项

第一步：下载并安装Nginx服务

1、官网下载Nginx包（http://nginx.org/en/download.html）

 2、解压文件如图：

注意：解压路径不可存在中文，否则会不可解析。

3、下载Windows Service Wrapper 工具，选择合适的版本进行下载，该工具可将Nginx设置为windows服务。（https://repo.jenkins-ci.org/ui/native/releases/com/sun/winsw/winsw/）

4、下载后把下载的winsw-1.18-bin.exe 文件放在Nginx安装目录(F:\Nginx\nginx-1.22.0)，并修改名称为nginx-service.exe，

　　然后分别创建nginx-service.exe.config，nginx-service.xml文件,把这两个文件放在Nginx安装目录下。如下图

 nginx-service.exe.config内容如下:

"v2.0.50727" />
"v4.0" />


"false"/>

nginx-service.xml内容如下：（根据解压路径进行修改）

nginx
Nginx Service
Nginx Service
C:\Nginx\nginx-1.18.0\logs\
"roll-by-size">
10240
8

C:\Nginx\nginx-1.18.0\nginx.exe
-p C:\Nginx\nginx-1.18.0\nginx
nginx-1.18.0\nginx.exe
-p nginx-1.18.0\nginx -s stop

5、进入Nginx安装目录执行进行服务安装与启动

安装：nginx-service.exe install
卸载：nginx-service.exe uninstall
启动：nginx-service.exe start
终止：nginx-service.exe stop

若操作完成，在服务页面找不到该服务，可检查一下nginx版本与你下载的“Windows Service Wrapper”工具版本是否一致。

如果错误1067则检查Nginx监控的端口是否被占用。

第二部：发布前端项目

1、VsCode编译Vue项目形成dist文件（作用是将Vue文件编译为浏览器认识的js、css、html文件）

npm run build

2、将打包后的dist文件放进Nginx安装目录的html文件夹下（也可以放进其他地方，只要路径后续配置好一切都OK）

3、修改Nginx配置文件（nginx.conf）

server {
listen 8200; // 监控的端口
server_name localhost; // 域名、Ip地址
location / {
root C:/Nginx/nginx-1.18.0/html/dist; // dist存放位置
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

4、如果前端项目配置了反向代理，则需要注意

   因为在vue.config.js中配置的devServer.proxy只是在开发环境下将请求代理到后端服务器的本地服务，

 我们把项目打包成dist文件只是把我们的组件等资源打包了，并不会将代理服务器给打包，所以项目中的请求路径不完整导致访问不到对应资源

所以需要有另一个代理服务器来装载它，此时只需要修改Nginx的配置文件在Server中添加location ^~/api/即可。

location ^~/api/ {
proxy_pass http://xxx.xxx.xxx.xxx:8889/api/;
}

xxx.xxx.xxxx.xxx表示你的服务器地址，8889是我后端的访问端口。