vue项目部署到docker中

通过nginx镜像部署

vue项目npm run build打包成dist目录，有的打包会加上版本号

启动 docker

将dist目录通过xftp拷贝到linux服务器上，同目录下新建Dockerfile

?

1 2 3

FROM nginx COPY ./dist/ /usr/share/nginx/html/ COPY nginx.conf /etc/nginx/nginx.conf

第一句指定基础镜像

第二句将dist目录下内容拷贝到容器中的/usr/share/nginx/html/目录

第三句将nginx.conf配置文件拷贝到容器中

nginx.conf如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

#user  nobody; worker_processes  1;    #error_log  logs/error.log; #error_log  logs/error.log  notice; #error_log  logs/error.log  info;    #pid        logs/nginx.pid;       events {     worker_connections  1024; }       http {     include       mime.types;     default_type  application/octet-stream;        #access_log  logs/access.log  main;        sendfile        on;     #tcp_nopush     on;        #keepalive_timeout  0;     keepalive_timeout  65;        #gzip  on;        client_max_body_size   20m;     server {         listen       80;         server_name  www.aaaaaa.com;            #charset koi8-r;            #access_log  logs/host.access.log  main;      location / {         root   /usr/share/nginx/html;         index  index.html index.htm;         try_files $uri $uri/ /index.html;     }       }    }

 如果需要反向代理后台接口，需要加一句

    location ^~ /api/ {
        proxy_pass http://192.168.16.181:8080/api/;
    }
这样所有带/api/的访问请求都会转发到http://192.168.16.181:8080/api/

打包镜像
当前目录下运行：docker build -t nginx-test .
后面的 . 不能省
运行容器
docker run --name nginx-docker -p 8050:80 -d nginx-test
浏览器输入localhost:8005就可以访问了前端页面了

对于有版本号的vue项目打包后路由找不到对应的页面，浏览器会报Loading chunk {n} failed，我没找到项目的原因，不知道具体原因是什么只好把static文件夹拷到dist目录下，重新生成镜像运行就可以了。

http://192.168.16.181:8080/api/
Loading chunk {n} failed