VUE使用docker传环境变量

最新推荐文章于 2024-04-05 09:45:00 发布

吉米多维奇

最新推荐文章于 2024-04-05 09:45:00 发布

阅读量4.4k

点赞数

文章标签： vue docker

本文链接：https://blog.csdn.net/qq_41078029/article/details/106471813

版权

项目需要在打包后，部署安装的时候传环境变量。

Dockerfile内容，API_BASE_URL为传入vue的环境变量。

FROM node:alpine as builder

WORKDIR /app
# 格式为 WORKDIR <工作目录路径>。
# 使用 WORKDIR 指令可以来指定工作目录（或者称为当前目录），以后各层的当前目录就被改为指定的目录，如该目录不存在，WORKDIR 会帮你建立目录。

COPY app/package-lock.json .
COPY app/package.json .

RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装淘宝镜像
RUN cnpm install
# 安装依赖
COPY app/. .
# 切换到项目文件夹
RUN npm run build
# 打包项目

FROM nginx:1.15.2-alpine

# Nginx config
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

COPY --from=builder /app/dist /usr/share/nginx/html/

EXPOSE 80

RUN echo http://mirrors.aliyun.com/alpine/v3.7/main/ >> /etc/apk/repositories
RUN apk add --no-cache bash
# 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=\"$API_BASE_URL\"@\" /usr/share/nginx/html/index.html; nginx -g \"daemon off;\""]

在main.js中加入下面代码，调用this.$baseUrl就能使用了，当然在开发版本需要设置环境变量

const {promiseBaseUrl}=document.querySelector('html').dataset
if(promiseBaseUrl){
  Vue.prototype.$baseUrl=`${promiseBaseUrl}`
}else{
  Vue.prototype.$baseUrl=VUE_APP_BASE_API
}

docker 打包镜像命令

sudo docker build --no-cache --memory-swap -1 . -t 镜像名称

docker 启动命令

sudo docker run -p 4000:80 -e API_BASE_URL=http://2.8.1.2:8001/   -d -t 镜像名称

吉米多维奇

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
VUE使用docker传环境变量

项目需要在打包后，部署安装的时候传环境变量。 Dockerfile内容，API_BASE_URL为传入vue的环境变量。 FROM node:alpine as builderWORKDIR /app# 格式为 WORKDIR <工作目录路径>。# 使用 WORKDIR 指令可以来指定工作目录（或者称为当前目录），以后各层的当前目录就被改为指定的目录，如该目录不存在，WORKDIR 会帮你建立目录。COPY app/package-lock.json .COPY .
复制链接

扫一扫