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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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;\""]

以上是 VUE通过Docker传入参数替换环境变量 的全部内容， 来源链接： utcz.com/z/378901.html

回到顶部