Vue 项目 nginx 打包

1、前端项目打包

npm run build

2、写 nginx 文件

# 项目根目录下创建文件夹 nginx
mkdir nginx

配置文件 default.conf

server {
  listen       80;
  server_name  localhost;

  #charset koi8-r;
  access_log  /var/log/nginx/host.access.log  main;
  error_log  /var/log/nginx/error.log  error;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /ui/index.html =404;
  }

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

3、使用 docker 打包运行

1）Dockerfile 文件

FROM nginx
COPY dist /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

2）打包、启动

sudo docker build -t  vue_demo:01 .
sudo docker run -p 13000:80 -d --name mydemo vue_demo:01

3）访问网址测试