windows 下nginx 部署VUE

一、下载nginx

     nginx 下载地址 :https://nginx.org/en/download.html?utm_source=so

二、 nginx 命令

　　1. win+r 打开cmd ；cd 到nginx 安装目录

　　2. 启动： start nginx

　　3.重启服务：nginx -s reload

 

三、nginx 配置文件notepad++ 插件

notePad++ 下载nginx 语言格式设置
　　下载“userDefineLang_nginx.xml”文件：https://file.bugxia.com/s/NSdf3mi3NrbfqiY

　　导入 语言配置
　　“语言”菜单 —》 弹出“自定义语言格式”窗口 —》 点击“导入”按钮 —》 选择刚才下载的“userDefineLang_nginx.xml”文件 —》 导入成功会提示“Import Successful” —》关闭

 

四、nginx 配置

　　1.vue build后的文件夹dist 放到  nginx-1.24.0\html 文件夹下；

　　2.打开 nginx-1.24.0\conf\nginx.conf 文件 编辑端口、路径、和代理既可，如下配置

　　 

server {
listen 8686;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {
root html/RFTPVue/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}

# 通过 location 前缀匹配 api/v1
location /api/ {
# 配置跨域
# add_header "Access-Control-Allow-Origin" *;
# proxy_next_upstream http_502 http_504 error timeout invalid_header;
# 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_pass http://IP:端口;
}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}

}