1、生成vue專案檔案目錄dist

npm run build

2、編寫dockerfile檔案

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

3、編寫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;
    }
 
    }
  
}

4、將兩個檔案一個檔案目錄上傳至阿里雲伺服器中。

5、建立Docker映象

docker build -t vuenginx:v1 .

6、建立容器

docker run -d -p 8001:80 -v dist:/usr/share/nginx/html/ --name myvuenginx vuengix:v1

7、設定nginx檔案目錄許可權

1) 先進入容器

docker exec -it 容器ID /bin/bash

2) 設定許可權

chmod -R 755 /usr/share/nginx/html/

dockerfile檔案和nginx.conf檔案的編寫借鑑了https://www.cnblogs.com/blue-rain/p/12463133.html的文章。