vue项目打包后部署到nginx

之前写的文章《vue接通后端api以及部署到服务器》

发现有人问到vue项目打包后dist文件夹怎么部署？所以，就有了这篇文章，也是对之前写的文章做一个补充吧！

1.要下载nginx,然后解压。这里以windows版本为例，.zip后缀的才是windows版本。下载地址:(http://nginx.org/en/download.html)

解压后，运行cmd,去到nginx根目录,执行启动命令

nginx在windows系统下有三个常用的命令

启动命令 start nginx
强制停止命令 nginx.exe -s stop
重启命令 nginx.exe -s reload

为了验证nginx是否启动成功，可以到浏览器访问http://localhost:80,看到下面的页面，说明启动成功

2.接下来，就要进行配置了，找到conf文件夹下的nginx.conf，打开就可以进行编辑配置，打开之后看到前面带有“#”号，都是一些注释，删掉也不影响配置，删掉之后看起来也更加简洁，不过删的时候要小心，只能掉那一行前面带有“#”号的。

3.具体配置和说明如下：

#user  nobody;
worker_processes  1;



events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8000; #这里配置的是端口
        server_name  localhost;

        location / {
            root   E:\aaa\dist; #这里配置vue项目打包后dist文件夹的路径
            index  index.html index.htm; #配置首页，一般不用改
        }

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

    }

}

配置好后，保存。去cmd运行重启命令，访问http://localhost:8000，就可以看到你项目运行起来了。

4.总结

dist文件夹的路径上的文件名不要有空格，不要有中文，填写路径直接复制过去，不要手写，不然容易出错，导致nginx启动不了。