1. Package and build dist

Add entry and other configurations in vue.config.js:

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

Write the build build in the package.json file:

Then run:

npm run build

There is a built dist package in the root directory of the project, double-clicking the index.html file can run normally. If it cannot run, you can refer to other articles to reconfigure the packaging.

2. Create a mount directory file and configuration file

1. Create a mount directory

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

2. Upload the dist folder to the www directory

3. Create nginx.conf configuration file

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. Run the Nginx container

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

When the port has been opened, you can access the Vue page through ip:port/dist/index.html

!!! If it appears: 403 Forbidden nginx/1.23.4 , it may be that nginx does not have permission to operate, you need to change the permission of /znzm-dlaq, and then restart the nginx1 container:

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

Still error 403 Forbidden nginx/1.23.4 can refer to: https://blog.csdn.net/weixin_44138647/article/details/103589130

Docker deploys Vue projects through Nginx container proxy