前言

vue项目在linux上发布有两种方式容易混淆，故此记录下：
第一种：基于Nginx基础镜像，将自定义的vue项目用docker打包成image镜像，然后运行容器
第二种：直接安装Nginx服务器，拷贝dist文件nginx路径下，修改配置启动即可

nginx在这里的作用是代理，说得具体一点就是将我们服务器上的文件比如C://dist/index.html映射为127.0.0.1:9000

第一种、将vue项目发布到Docker容器

1. 前端运行npm run build打包，生成一个dist文件夹
2. 在dist文件同级目录下新增default.conf文件（用于配置nginx）、Dockerfile（用于打包镜像）

default.conf文件：

server {
    listen 80; #nginx监听的端口,监听的是docker容器的内部端口
    server_name xxxx.xxx.xx.x; # docker服务宿主机的ip
     
    location / {
        root /usr/share/nginx/html;   #dist文件需要拷贝到此
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
     
    error_page 500 502 503 504 /50x.html;  #报错指向页面
    location = /50x.html { 
        root html;
    }
}

如果需要解决跨域可以增加代理：

location ^~ /wechat {#匹配所有路径以/wechat开头的请求

  proxy_pass https://qyapi.weixin.qq.com/cgi-bin; #设置想要转发的真实后端服务

}

Dockerfile：

#指定基础镜像
FROM nginx
MAINTAINER resume
RUN rm /etc/nginx/conf.d/default.conf
#删除nginx默认的配置文件，替换成自己写的配置文件
ADD default.conf /etc/nginx/conf.d/ 
#把dist文件夹拷贝到nginx的启动根目录下
COPY dist/ /usr/share/nginx/html/

3. 将resume文件夹拷贝到服务器，然后进入到dockerfile根路径，创建镜像

docker build -t resume .  #resume指镜像名称

运行这段指令后，会自动执行docker pull nginx拉取镜像，再打包resume镜像
最后的点'.',指镜像构建过程中的上下文环境的目录。

4. 运行容器

#访问服务器的86端口，自动会找到容器的80端口，容器名称resume_front，每次自启动
docker run -d -p 86:80 --restart=always --name resume_front resume

至此，vue程式即发布运行起来，输入xxxx.xxx.xx.x：86即可访问vue前端项目。

注意：由于nginx是跟vue项目一起打包运行在了resume_front容器中，如果想持久化文件，可以使用-v 服务器本地路径:/usr/share/nginx/html做卷映射，dist文件夹内容在resume_front容器中的/usr/share/nginx/html路径下，要确保服务器本地路径中的文件与/usr/share/nginx/html内容一致。

第二种、将vue项目发布到Nginx服务器

安装Nginx服务器
到nginx的安装目录下使用 start nginx启动nginx服务
同上将dist文件夹放到html路径下，修改nginx配置
配置完后，使用nginx -s reload 刷新配置文件，或者重启 nginx 都行，然后就可以通过xxxx.xxx.xx.x：80进行访问了，注意此时是配置文件中的80端口，非容器的内部端口。

Vue项目发布到Docker/Linux

前言

第一种、将vue项目发布到Docker容器

第二种、将vue项目发布到Nginx服务器