简介：目标使用docker将vue生成的dist文件，结合nginx生成镜像，然后运行；
1、首选确保vue项目正确运行，并能正确打包dist文件；
2、查看已经生成的dist文件
3、将dist文件打包为rar文件或者zip文件，本文使用rar文件
4、确保服务器已经安装docker；
新建文件夹：/home/questionaire-app/
将dist.rar 上传到该目录下，并解压到当前目录下；
unrar x dist.rar
5、在/home/questionaire-app/下新建nginx配置文件default.conf，新建Dockerfile文件；
1）编辑default.conf文件
server {
listen 80;
server_name 127.0.0.1;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html
index index.html index.htm;
}
location /prod-api/ {
proxy_pass http://127.0.0.1:18080/;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
代理可以根据需求配置，不强求
2）编辑Dockerfile文件：
# 使用nginx镜像
FROM nginx
# 作者
MAINTAINER cmh
# 删除nginx 默认配置
RUN rm /etc/nginx/conf.d/default.conf
# 添加我们自己的配置 default.conf 在下面
ADD default.conf /etc/nginx/conf.d/
# 把刚才生成dist文件夹下的文件copy到nginx下面去
COPY dist/ /usr/share/nginx/html/
最终该目录下是这样的:
6、生成镜像并运行
1）生成镜像
“ . ” 这个点不要省略
docker build -t mall-admin-vue .
2）运行容器
docker run -d --name mall-admin-vue -p 8088:80 mall-admin-vue
7、测试：
浏览器通过ip+端口访问
参考文档：https://blog.csdn.net/cmh1008611/article/details/144793141
