VueJS 为同一个项目构建具有不同资源的多个应用程序答案

【问题标题】：VueJS build multiple apps with different resources for the same projectVueJS 为同一个项目构建具有不同资源的多个应用程序
【发布时间】：2020-03-05 00:19:36
【问题描述】：

我正在使用 VueJS 2.6 和 Vuetify 2.1。我正在使用不同的资源（针对不同的品牌）构建相同的应用程序。对于我使用Vuetify Theme 更改应用程序颜色的颜色非常酷。

每次构建应用程序时，我都需要手动更改颜色、资源（图像、徽标、文件等）和 .env 内容。然后我运行npm run serve 用于开发或npm run build 用于生产。

我正在寻找一些东西（我想是 vue cli 命令）来保存品牌构建配置，选择品牌构建，构建将自动获取好的资源。

那么...可以为同一个项目构建具有不同资源的多个应用程序吗？例如，npm build google 将使用某些图像、.env、文件等构建具有 Google 品牌的应用程序......而npm build apple 将使用某些图像、.env、文件等构建具有 Apple 品牌的应用程序......

【问题讨论】：

我猜你不再需要解决方案了，但我决定分享我的答案，因为它可以帮助在未来 10 年内遇到同样问题的人哈哈
好主意，伙计！

标签： vue.js npm vuetify.js

【解决方案1】：

您可以使用环境变量来指示 NPM 在构建时应该使用哪些设置来编译您的应用程序。

另外，您可以使用.env 文件来实现此目标，然后指示您的应用程序根据特定的环境变量读取这些dotEnv 文件的内容。

例如：您可以在 .env 文件中定义这些设置

// .env.google file
VUE_APP_BRAND_IMAGE=src/images/google.png

// .env.apple file
VUE_APP_BRAND_IMAGE=src/images/apple.png

然后在你的 Vue 应用程序中你可以像这样访问这个变量。

<template>
  <div class="brand-image">
    <img :src="brand_image" />
  </div>
</template>
<script>
const BRAND_IMAGE = process.env.VUE_APP_BRAND_IMAGE

export default {
 
  data(){
    return {
      brand_image: BRAND_IMAGE
    }
  }
}
</script>

【讨论】：