vue.js - 使用 azure devops 发布管道部署 Vue.js 应用程序

Question

我有一个使用 vue-cli 3 创建和构建的 vue.js 应用程序。我在 .env.test 和 .env.prod 中有一些环境变量文件。

为了构建应用程序，我使用了 azure devops 构建管道，我在其中运行命令: npm run build:test 或 npm run build:prod

这会生成不同的工件，这些工件会输入到 azure devops 发布管道中的 Stage。

我面临的问题是我不想为每个环境单独构建。我想构建一个并部署到不同的环境，这可能吗？

我如何处理这些变量来为所有环境构建一次包？这是一个好习惯吗？或者我应该像现在这样针对不同的环境使用不同的管道吗？

Answer 1

从CI的角度

应该只有一个构建管道来构建工件，而不管它运行的环境如何。

.env.prod 可用于将工件部署到任何环境(Development、Production 等)

您必须提供带有 token 的配置，这些 token 将在部署/发布阶段被替换:

env_key1=#{token_key1}#
env_key2=#{token_key2}#
env_key3=#{token_key3}#

因此，只需为所有环境使用单一配置文件构建项目并发布工件。

从CD的角度

我建议使用具有多个阶段的单个发布管道 (开发、生产等)。

根据阶段提供单独的变量组。它允许保持变量独立、逻辑分组并使用 Azure Key Vault 作为 secret 来源。变量名称必须等于环境标记(没有前缀和后缀)。

将您想要的任何 Task 添加到 Stage 中，它将查找并替换 token 。

目前，我使用来自市场的 Replace Tokens 扩展。根据阶段，将替换不同的变量组。 Replace Tokens 任务自动完成所有工作，e.i.扫描 js 文件并替换标记。默认 token 前缀和后缀为:#{ }#，但任务允许提供您希望的自定义​​。