Deploying Vue.js App using azure devops release pipeline

From perspective of CI

There should be only single build pipeline that will build artifact regardless of the environment where it will run.

.env.prod might be used to deploy artifacts to any environments (Development, Production, etc.)

You have to provide configuration with tokens, which will be replaced on Deployment/Release stage:

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

Therefore, just build project and publish artifact using single configuration file for all environments.

From perspective of CD

I would recommend to use single release pipeline with multiple stages (Development, Production, etc). enter image description here

Provide separate variables groups based on stages. It allows to keep variables separate, logically grouped and use Azure Key Vault as source of secrets. Variable names must be equal to environment tokens (without prefix and suffix).

enter image description here

Add any Task you wish into Stage, which will find and replace tokens.

Currently, I use Replace Tokens extension from marketplace. Depend on stage, different group of variables will be substituted. Replace Tokens task does all of the job automatically, e.i. scans js files and replaces tokens. Default token prefix and suffix are: #{ }#, but task allow to provide custom you wish. enter image description here