1. Empacote e construa dist

Adicione entrada e outras configurações em vue.config.js:

pages: {
    index: {
      // 入口
      entry: 'src/main.js'
    }
  },
lintOnSave: false,
publicPath: './'

Escreva a compilação no arquivo package.json:

Então corra:

npm run build

Existe um pacote dist construído no diretório raiz do projeto, clicando duas vezes no arquivo index.html pode ser executado normalmente. Se não puder ser executado, você pode consultar outros artigos para reconfigurar a embalagem.

2. Crie um arquivo de diretório de montagem e um arquivo de configuração

1. Crie um diretório de montagem

 mkdir -p /znzm-dlaq/www /znzm-dlaq/logs /znzm-dlaq/conf

2. Carregue a pasta dist no diretório www

3. Crie o arquivo de configuração nginx.conf

vim conf/nginx.conf

user  root;
worker_processes  1;
 
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
 
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
 
    access_log  /var/log/nginx/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
 
    keepalive_timeout  65;
 
    #gzip  on;
 
    include /etc/nginx/conf.d/*.conf;
 
    server {
		listen       80;
		server_name  localhost;
		charset utf-8;
 
		location /dist/ {
			alias  /znzm-dlaq/www/dist;#ok
			autoindex on; ##显示索引
			autoindex_exact_size on; ##显示大小
			autoindex_localtime on; ##显示时间
		}
		error_page  404              /404.html;
	}
}

3. Execute o contêiner Nginx

docker run -d -p 8081:80 --name nginx1 -v /znzm-dlaq/www:/usr/share/nginx/html -v /znzm-dlaq/logs:/var/log/nginx  nginx

Quando a porta for aberta, você pode acessar a página Vue através de ip:port/dist/index.html

Se aparecer: 403 Forbidden nginx/1.23.4 , pode ser que o nginx não tenha permissão para operar, você precisa alterar a permissão de /znzm-dlaq, e então reinicie o container nginx1:

chmod -R 777 /znzm-dlaq/
docker restart nginx1

Ainda erro 403 Forbidden nginx/1.23.4 pode se referir a: https://blog.csdn.net/weixin_44138647/article/details/103589130

O Docker implanta projetos Vue por meio do proxy de contêiner Nginx