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

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

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

　　1.安装发布vue

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

　　1.查看镜像

　　docker search nginx 复制代码

　　1.

　　2.拉取镜像

　　docker pull nginx 复制代码

　　1.

　　3.查看镜像

　　docker images 复制代码

　　1.

　　4.vue打包

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

　　npm run build 复制代码

　　1.

　　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方式启动郑州看精神科医院哪家好http://www.juenpt.com/

　　-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的前台静态文件了。