项目需要部署到甲方电脑上,使用docker是个不错的选择。
1、创建Dockerfile文件

# 设置基础镜像
FROM nginx:latest
 
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY default.conf /etc/nginx/conf.d/default.conf

2、创建镜像中nginx配置文件

新建文件default.conf

# nginx配置
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 根目录,默认nginx镜像的html文件夹,可以指定其他
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 如果vue-router使用的是history模式,需要设置这个 
        try_files $uri $uri/ /index.html;
    }
 
    #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、个人喜欢在package自定义命令:

  "scripts": {
    "dev": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "docker-build": "docker build -t bim-web ."
  },

4、构建镜像使用命令

npm run docker-build

5、实例化容器

docker run -p 3000:80 -d --name bim-web bim-web
Logo

前往低代码交流专区

更多推荐