Vue前端项目打包

4.1编译打包
npm run build

4.2 前端项目 nginx的配置文件default.conf 和 dockerfile
default.conf
upstream wms-app {
server 192.168.14.3:3666 ;
server 192.168.14.3:3777 ;
}
server {
listen 80;
listen [::]:80;
server_name localhost;

access_log  /var/log/nginx/host.access.log  main;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html; #解决单页面找不到路径问题 404
}

location /api/ {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization'; #跨域设置
        proxy_pass http://wms-app ;  #可以配置多个下游服务，具有负载功能
        #proxy_pass http://192.168.14.3:3666; #仅配置一个下游服务，不具有负载均衡能力

}
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}

}

1.root：设置静态根目录为 /usr/share/nginx/html
2. index：设置目录的默认文件为 index.html 、index.htm、index.php
3. try_files：设置文件查找规则为 $uri $uri/ /index.html。即3个规则，先从 $uri 查找，再从 u r i / 目录中查找，最后查找 / i n d e x . h t m l 。
dockerfile
FROM nginx
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
#COPY default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/

4.3 构建镜像
docker build -t web:v1 .

4.4 运行
docker run -it -p 8086:80 web:v1