vue和可视化界面的部署，另附ngxin配置

对于后端开发的小伙伴，可以只了解后台服务的发布，但是如果搭建个人的项目或者做私活的话。前台的部署的也是离不开的话题。本文将介绍如何发布vue的前段项目。

这里楼主主要依赖nginx发布vue。

1.安装发布vue

老生常谈，首先需要使用docker安装nginx。

1.查看镜像

docker search nginx  
复制代码      

2.拉取镜像

docker pull nginx 
复制代码      

3.查看镜像

docker images
复制代码      

4.vue打包

此时，我们需要将vue打包，需要执行打包命令，如果没有特殊修改请执行：

npm run build
复制代码      

5.准备工作

1.新建文件夹

分别新建

• /usr/local/nginx/system：前台包存放位置
• /usr/local/nginx/conf：配置文件存放位置
• /usr/local/nginx/log：日志文件存放位置

2.挂载vue包

新建/usr/local/nginx/system文件夹（作为宿主机挂载到docker容器的文件夹），在vue打包的文件中获取dist文件，并将文件夹放于/usr/local/nginx/system中。

3.挂载nginx配置

将nginx.conf复制到/usr/local/nginx/conf中，下文附上nginx配置。

worker_processes  1;
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
 
    #指定日志路径 
    access_log /var/log/nginx/access.log; 
    error_log /var/log/nginx/error.log;
 
    sendfile        on;
 
    keepalive_timeout  65;
 
    server {
        listen       80;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location ^~/system { #当访问路径为 ip/system时 会访问/usr/share/nginx/system/dist下的静态文件 然后静态文件会调用接口 ajax完成
                alias /usr/share/nginx/system/dist; #指定dist文件存放路径
                    index index.html;
                try_files $uri $uri/ /system/index.html;
        }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
复制代码      

5.运行镜像

docker run --name nginx -d -p 80:80 --net=host -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf  -v /usr/local/nginx/log:/var/log/nginx  -v /usr/local/nginx/system:/usr/share/nginx/system nginx
复制代码      

参数讲解：（ps 宿主机的文件夹需要新建） docker run --name nginx：容器名称

• -d -p 80:80 将容器中的80端口，指定到宿主机的80端口。
• --net=host：以host方式启动
• -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf ：宿主机的/usr/local/nginx/conf/nginx.conf文件映射到容器的/etc/nginx/nginx.conf，实际是以/usr/local/nginx/conf/nginx.conf为配置文件启动。
• -v /usr/local/nginx/log:/var/log/nginx：宿主机/usr/local/nginx/log映射到容器的/var/log/nginx 存放log日志，与nginx搭配使用。
• -v /usr/local/nginx/system:/usr/share/nginx/system ：宿主机/usr/local/nginx/system文件夹与容器/usr/share/nginx/system映射，将vue的dist文件放入/usr/local/nginx/system，容器中nginx.conf指定跳转的目录为/usr/share/nginx/system。
• nginx 镜像名称

上面的映射的流程是，在启动时/usr/local/nginx/conf/nginx.conf会复制到/etc/nginx/nginx.conf中，同理docker容器下log文件也会映射到/usr/local/nginx/log，/usr/share/nginx/system会映射到docker容器的/usr/share/nginx/system中。

2.总结

nginx发布vue原理是当你在web浏览器中输入xxxx/system时（路径可以多种配置），nginx会监听web的80端口。如果路径在配置有拦截，那么会到配置的文件路径中获取（上文配置alias /usr/share/nginx/system/dist）。这样就能够获取到vue的前台静态文件了。

同时如果向上文这样配置也会通过全域的方式，配置单点登录。