• VUE通过Docker传入参数替换环境变量


    1. web项目请求后端必须在前端代码内部写死后端的IP地址与端口(比如.env文件)

    2. 通过docker启动传入参数:

    更改前端封装http请求:

    /**
     * docker 运行命令传入请求后端的IP地址
     * 打包命令:sudo docker build --no-cache --memory-swap -1 . -t 镜像名称
     * 启动命令:sudo docker run -p 4000:80 -e VUE_APP_API_BASE_URL=http://192.168.0.1:8001/   -d -t 镜像名称
     */
    const baseUrl = () => {
      const { promiseBaseUrl } = document.querySelector('html').dataset
      if (promiseBaseUrl.indexOf('http') === 0) {
        return `${promiseBaseUrl}`
      }
      return process.env.VUE_APP_API_BASE_URL
    }
    
    // 创建axios实例,在这里可以设置请求的默认配置
    const service = axios.create({
      timeout: 6000, // 设置超时时间6s
      baseURL: baseUrl()
    })

    环境变量文件:

    NODE_ENV=production
    VUE_APP_PREVIEW=true
    VUE_APP_API_BASE_URL= http://192.168.160.248:10700/api

    docker 打包命令:

    docker run -p 2021:80 -e VUE_APP_API_BASE_URL=http://后端IP:后端端口/api -d -t web
     
    dockerfile:
    #该镜像是基于nginx:latest镜像构建的
    FROM nginx
    
    #作者名
    MAINTAINER lingdu
    
    #删除目录下的default.conf文件
    #RUN rm /etc/nginx/conf.d/default.conf
    
    #将default.conf复制到/etc/nginx/conf.d/下,用本地的default.conf配置来替换nginx镜像里的默认配置
    #ADD default.conf /etc/nginx/conf.d/
    
    #将项目根目录下dist文件夹复制到镜像/usr/share/nginx/html/目录下 
    COPY ./dist/ /usr/share/nginx/html/
    
    #指定容器的工作目录
    WORKDIR /etc/nginx
    
    #指定于外界交互的端口,即容器在运行时监听的端口
    EXPOSE 80
    
    #设置程序的入口程序,运行容器时执行的shell命令,区别在于ENTRYPOINT后面携带的参数不会被docker run 提供的参数覆盖,而CMD会被覆盖
    #ENTRYPOINT [ "/usr/sbin/nginx", "-g", "daemon off;" ]
    
    # sed [-nefr] [动作]
    # 选项与参数:
    # -n :使用安静(silent)模式。在一般 sed 的用法中,所有来自 STDIN 的数据一般都会被列出到终端上。但如果加上 -n 参数后,则只有经过sed 特殊处理的那一行(或者动作)才会被列出来。
    # -e :直接在命令列模式上进行 sed 的动作编辑;
    # -f :直接将 sed 的动作写在一个文件内, -f filename 则可以运行 filename 内的 sed 动作;
    # -r :sed 的动作支持的是延伸型正规表示法的语法。(默认是基础正规表示法语法)
    # -i :直接修改读取的文件内容,而不是输出到终端。
    # sed -i 's/原字符串/新字符串/' /home/1.txt
    # sed -i 's/原字符串/新字符串/g' /home/1.txt
    
    CMD ["/bin/bash", "-c", "sed -i "s@<html@<html data-promise-base-url="$VUE_APP_API_BASE_URL"@" /usr/share/nginx/html/index.html; nginx -g "daemon off;""]

    彪悍的人生不需要解释,彪悍的代码不需要注释。
  • 相关阅读:
    Codeforces Round #499 (Div. 2) C.FLY 数学推导_逆推
    Codeforces div2 #499 B. Planning The Expedition 大水题
    Lost Cows POJ
    洛谷P2915 [USACO08NOV]奶牛混合起来Mixed Up Cows 状压动归
    2018.9.30 ~ 2018.11.1 做题记录
    推荐一款强大的轻量级模块化WEB前端快速开发框架--UIkit
    jQuery Validate多实例讲解
    关于Css的垂直居中的一些方法
    关于浮动与清除浮动,你应该知道的
    使用 Vuex + Vue.js 构建单页应用
  • 原文地址:https://www.cnblogs.com/ingstyle/p/14329474.html
Copyright © 2020-2023  润新知