vue项目打包成镜像

将发布好的文件夹dist传输到服务器上， 假设在/apps/dist。

新建Dockerfile文件，路径为/apps/Dockerfile（与dist同级）

FROM nginx

# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面，其中dist是相对于Dockerfile的位置
COPY dist/  /usr/share/nginx/html/

# 用本地的nginx配置替换镜像中的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

 

再新建文件夹以及nginx配置文件，路径为/apps/nginx/default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        #  注意：如果vue-router使用的是history模式，try_files $uri $uri/ /index.html;  非常重要！！！
        # 如果使用了hash模式，可以省略这个
        try_files $uri $uri/ /index.html;
    }

    #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   /usr/share/nginx/html;
    }
}

 

然后使用Docker build命令进行打包， 后续步骤同上一篇（.net6项目打包镜像）