项目需要在打包后,部署安装的时候传环境变量。
-
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 镜像名称