VueCLI3应用程序（nginx/docker）使用特定于环境的变量

如何从Vue应用程序外部化和使用环境变量：

• 用
• 部署在docker容器中
• 使用NGINX

一些细节： 该项目只构建一次，并部署到测试和现场环境中。因此，我想将一些变量外部化，这些变量会在环境中发生变化（如要调用的URL、域、用户名等）。带前缀的

.env

文件变体的经典用法对这个问题没有帮助，因为它们的值在构建阶段被注入到代码中：一旦构建，它们就不是变量

尝试一下，我发现了一种利用

dotenv

和一些额外配置的方法；但我无法将其与中的配置组合在一起。不过，解决方案不需要采取类似的方法，我只是想找到一条出路

---

可能不是有用的信息，但我计划在Kubernetes配置中定义这些环境变量。

我认为我已经完成了克服这种情况的工作。我把决议留在这里

在

.env.development

中定义特定于环境的环境变量（用于开发目的），并使用相应的值将它们添加到中

在Vue项目源文件夹的某个位置添加一个

configuration.js

文件。它将充当确定运行时是开发（本地）还是生产（容器）的包装器。与所示类似，但不需要导入/配置

dotenv

：

导出默认类配置{
静态获取环境配置（）{
返回{
envKey1:“$ENV_KEY_1”，
envKey2:“$ENV_KEY_2”
}
}
静态值（键）{
//如果类的EnvConfig对象中不存在该键，则返回null
如果（！this.EnvConfig.hasOwnProperty（键））{
错误（`Configuration:没有名为“${key}”的键。请将其添加到配置类中。`）
返回
}
//获取值
const value=this.EnvConfig[key]
//如果该值为null，则返回
如果（！值）{
错误（`Configuration:Value for“${key}”未定义`）
返回
}
如果（！value.startsWith（“$VUE\u APP\”）{
//价值已经被取代，似乎我们正在生产（集装箱化）。
返回值
}
//价值没有被取代，似乎我们正在发展。
const envName=value.substr（1）//删除$并从process.env获取当前值
const envValue=process.env[envName]
如果（！envValue）{
错误（`Configuration:Environment变量“${envName}”未定义`）
返回
}
返回值
}
}

创建一个

entrypoint.sh

。经过一些修改，它将如下所示：

#/bin/bash
函数通过{local IFS=“$1”shift；echo“$*”；}连接_
#查找vue环境变量
vars=$（env | grep VUE|u APP | awk-F='{print“$”“$1}'）
vars=$（通过“，”$vars连接）
echo“找到变量$vars”
对于/app/js/app.*中的文件；
做
回显“正在处理$file…”；
#使用现有的JS文件作为模板
cp$file$file.tmpl
envsubs“$vars”<$file.tmpl>$file
rm$file.tmpl
完成
nginx-g“守护进程关闭；”

在

Dockerfile

中，添加一个

CMD

，以便在容器创建过程中将此

entrypoint.sh

脚本作为引导脚本运行。因此，每次启动容器时，它都会从pod配置中获取环境变量，并将其注入到步骤2中所示的配置类中

最后，不要使用像

configuration.value（'envKey1'）

这样的包装器配置类，而要使用

process.env

。瞧

# build stage
FROM node:lts-alpine as build-stage

# make the 'app' folder the current working directory
WORKDIR /app

# Copy package*.json and install dependencies in a separaate step to enable caching
COPY package*.json ./
RUN npm install

# copy project files and folders to the current working directory
COPY ./ .

# install dependencies and build app for production with minification
RUN npm run build

# Production stage
FROM nginx as production-stage

RUN mkdir /app

# copy 'dist' content from the previous stage i.e. build
COPY --from=build-stage /app/dist /app

# copy nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf

# Copy the bootstrapping script to inject environment-specific values and pass it as argument current to entrypoint
COPY entrypoint.sh entrypoint.sh

# Make the file executable
RUN chmod +x ./entrypoint.sh

CMD ["./entrypoint.sh"]