一、nginx 介绍
1、什么是Nginx?
Nginx 是一个很强大的高性能Web和反向代理服务
其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等
2、Nginx的作用
负载均衡、静态服务器、正反向的代理
3、下载
网址:http://nginx.org/en/download.html
Mainline所有功能都全的版本(推荐)
Stable version稳定版
Legacy versions老版本
4、查看是否成功
localhost 默认80端口
欢迎界面成功
5、部署
build完以后 , dist文件内容 放到http里面,即可
6、基本指令
cmd 下到nginx路径
查看版本:nginx.exe -V
启动:start nginx
查看启动log:tasklist /fi "imagename eq nginx.exe"
快速关闭:nginx.exe -s stop
有序关闭:nginx.exe -s quit
查看关闭log:taskkill /f /t /im nginx.exe
重启:nginx.exe -s reload
检测端口是否被占用:netstat -ano | findstr "80"
静态资源存放: static -> location/下
7. 高阶使用
nginx中需要配置多个server :http://bugshouji.com/bbs-read-run?tid=1241
二、vue 项目部署流程
超详细步骤:
请查看如下链接: http://bugshouji.com/bbs-read-run?tid=1523
三、部署常见问题
1. 使用history模式,页面显示空白
解决方法:将dist文件夹的内容,放到nginx服务器运行即可
2. vue 打包成dist后,代理跨域设置失效
解决方法:使用nginx服务器运行,并在nginx服务器的配置文件中,进行代码配置
配置代码如下:
location /api/ {
proxy_pass http://172.16.8.9:8888/;
}
注:1. /api 变成 /api/
2. proxy_pass 设置的地址后面,一定要加 / 与分号
3. 解决子组件页新刷新显示404的问题,
配置代码如下:
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}