vue项目部署到docker中

通过nginx镜像部署

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

启动 docker

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

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

第一句指定基础镜像

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

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

nginx.conf如下

#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目录下，重新生成镜像运行就可以了。