第一步:将项目打包

demo地址:
https://github.com/RenlyWen/vue-init.git

 终端输入命令:

cnpm install && npm run build

 
之后会生成一个dist文件夹

---

第二步:配置Nginx

修改server-location路径 

worker_processes  1;
# 以上是全局模块
# worker_processes的值越大,Nginx并发能力越强

events {
    worker_connections  1024;
}
# worker_connections的值越大,Nginx并发能力越强

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /usr/local/nginx/html/dist;
            index  index.html index.htm;
        }
        # location
        # root: 将接收到的资源根据/usr/local/nginx/html/dist文件夹去查找资源
        # index: 默认去上述路径中找到index.html或者index.htm
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
}

之后启动nginx

---

第三步:部署项目

将dist文件夹上传到上面指定路径

/usr/local/nginx/html

浏览器访问服务器地址,因为配置的是80端口,所以默认不用加端口号

至此,Nginx部署一个vue项目完毕!