咱们就当是docker环境已经部署好了啊

一、项目打包

  1. 安装打包
language
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
#安装
npm install
#打包
npm run build
注：具体打包命令要看vue项目根目录下package.json文件中怎么定义
比如下图，则打包命令为
npm run build:prod
  1. 文件路径
language
  • 01
打包完成之后会在项目当前目录中生成一个dist文件

二、将vue项目部署在docker中

  1. 咱这是通过finalsheel将dist文件夹上传到服务器中自己定义的文件中—finalsheel专业版用户，同步真好用，就是不知道会不会被收集信息。
  2. 编写default.conf 文件，并上传到 dist同级目录下
language
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
server {
        listen       80;
        server_name  localhost; #服务器地址

        #charset koi8-r;

        #access_log  logs/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_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://aaa.ccc.com:8000/;    #后端项目接口地址
		}
		location /boom {
			proxy_redirect off;
			proxy_pass http://aaa.ccc.com:8000/;    #后端项目接口地址
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		}


        #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;
        }
    }
  1. 编写Dockerfile文件，并上传到docker服务器dist同级目录下
language
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
# 使用nginx镜像
FROM nginx
# 作者
MAINTAINER wpengsen
# 删除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/
  1. 上传完毕后当前目录文件为
language
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
usr
├── nginx
	└── default.conf #nginx配置
	└── dist # ruoyi-ui打包文件
	└── Dockerfile
  1. 在nginx目录下执行命令创建自定义镜像
language
  • 01
  • 02
  • 03
docker build -t project-vue .

#project-vue 为自定义镜像名称
  1. 运行镜像的容器
language
  • 01
docker run -d --name project-vue -p 8086:80 project-vue

没问题的话基本就ok啦

宝塔nginx直接部署
一定需要这些配置

language
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
location / {
           root   /www/wwwroot/aaa.bbb.com/dist;
           try_files $uri $uri/ /index.html;
           index  index.html index.htm; 
      }
    
    location /prod-api/{
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://aaa.bbb.com:1111/;    #后端项目接口地址
		}