nginx服务器及部署vue的常见问题

一、什么是Nginx?

Nginx 是一个很强大的高性能Web和反向代理服务

其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等

二、Nginx的作用

负载均衡、静态服务器、正反向的代理

### 三、下载 网址：http://nginx.org/en/download.html

Mainline所有功能都全的版本（推荐）
Stable version稳定版
Legacy versions老版本

四、查看是否成功

localhost 默认80端口

欢迎界面成功

五、部署

build完以后 ， dist文件内容 放到http里面，即可

六、部署的常见问题

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;
}

4. nginx 服务器常用指令

start nginx   启动
nginx -s stop 停止  不保存信息
nginx -s quit 停止  保存信息
nginx -s reload 重启
nginx -V 查看版本

注：
修改了配置文件一定要执行nginx -s reload 重启. 本人在测试过程中，执行命令也没能生效，最后，重启了一下电脑就可以了。所以，如果命令重启不行，你可以试着重启下电脑

作者：doubleyong

公众号：bug收集

博客：bugshouji.com (专门解决与收集bug的网站)