打包

npm run build
在这里插入图片描述
然后将dist文件夹压缩为dist.tar.gz

注意

  1. 在vue.config.js中加入静态配置

    1
    2
    3
    4
    5
    //assets目录
    assetsDir: 'static',
    //控制静态资源访问路径
    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
    publicPath: './',

  2. 如果想进行路由去除/# 需要router配置

    1
    2
    3
    4
    5
    6
    const router = new VueRouter({
        
        routes,
        mode: 'history',//去除#
        base: '/customfile',//基础路径一般不写 除非是子路径 需要集合publicPath并且保持一致
    })

  3. 在devServe中的配置打包不会被打入 所以一些服务代理需要额外配置 尤其是axios请求相关的

    1
    2
    3
    4
    5
    const service=axios.create({
        
        baseURL:'/api',//设置baseUrl
        timeout:10000
    })

一般情况下，如果有axios则本地开发时写vue.config.js下devServer配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//开发环境配置
devServer:{
    
    //访问域
    host:'localhost',
    //端口
    port:80,
    //服务启动后自动打开浏览器显示
    open:true,
    //解决路径去除# 刷新404问题
    historyApiFallback: true,
    //代理
    proxy:{
    
      //匹配路径
      '/api':{
    
      	//目标转换
        target:'http://localhost:8080',
        //允许跨域
        changeOrigin: true,
        //将api前缀去掉
        pathRewrite:{
    
          "^/api":''
        }
      }
    }
  }

利用nginx镜像打包成镜像

default.conf
注意是否是二级路径时配置
配置时 alias 代表资源路径就是alias后面的路径+location 后面的路径
root代表资源路径就是root后面的路径

1
2
3
4
5
6
7
8
9
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
server {
    
    listen       80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;
    #有二级路径时配置
    location /customfile {
    
        alias /usr/share/nginx/html/dist;
        index  index.html;
        try_files $uri $uri/ /customfile/index.html;
    }

	#没有二级路径时配置
	location /{
    
		root /usr/share/nginx/html/dist;
		index index.html;
		try_files $uri $uri/ /index.html;
	}

	#有axios 请求时配置 将api请求代理到服务端
    location ^~ /api/ {
    
    	#代理
        proxy_pass http://192.168.31.186:8080/; 
    }

    #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;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    
    #    deny  all;
    #}
}

DockerFile

1
2
3
4
5
FROM nginx
ADD dist.tar.gz  /usr/share/nginx/html
ADD default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
ENTRYPOINT nginx -g "daemon off;"

打包

1
docker build -f DockerFile -t test:v1.0 .

注意dist.tar.gz文件和default.conf文件要和DockerFile在同一目录
在这里插入图片描述

使用

启动镜像即可

1
2
3
docker run -p 80:80 --name test -d test:v1.0
#如果想让虚拟机开机自启动需要在执行
docker update test --restart=always

问题

如果出现favicon.ico图标没有显示 f12清除缓存即可
在这里插入图片描述

作者声明

1
如有问题，欢迎指正！