应用初始化时在 Vue 中存储环境值答案

【问题标题】：Store environment value in Vue upon app initialization应用初始化时在 Vue 中存储环境值
【发布时间】：2021-04-19 21:22:55
【问题描述】：

在使用 VueJS 构建的基本 Web 应用程序中，调用 API 以响应包含环境名称的对象。例如：
https://appsdev/mysimpleapp/api/environment
返回
{"applicationName":"My Simple App","version":"1.0.0.0","environment":"DEV"}

目前，导航按钮设置为有条件地显示环境是否为DEV。以下是该页面的相关部分：

<template>
   <!-- other content here -->
   <div @click="updateMenu()" v-show="['DEV'].includes(environment)"><router-link :to="{name: 'dev-notes'}">Dev Notes</router-link></div>
</template>

<script>
// other logic here
data() {
    return {
        environment: null
    }
},
created() {
    this.getEnvironment();
},
methods: {
    async getEnvironment() {
        const environmentDetails = await this.$service.access('environment').get();  // uses Axios to access API
            this.environment = environmentDetails.environment;
        }
    }
}
</script>

虽然这种方法有效，但在应用访问 API 时，“开发说明”导航按钮出现明显延迟。另外，每次页面加载时，都会调用 API。

希望对此进行改进，似乎最好在应用初始化时点击 API 一次，将该值存储在某个变量中，然后引用该变量以有条件地显示“Dev Notes”导航按钮.对于这么简单的事情，Vuex 似乎有点矫枉过正，而且这个应用程序没有this post 描述的 .env 文件，那么如何实现呢？

【问题讨论】：

标签： javascript node.js vue.js webpack vue-cli

【解决方案1】：

您可以使用节点的process.env 直接从 Vue CLI 访问环境模式信息，这是一个默认可用的功能。具体来说，process.env.NODE_ENV 告诉应用程序是在生产还是开发或其他模式下运行。来自 Vue CLI docs：

例如，NODE_ENV 将在生产模式下设置为“production”，在测试模式下设置为“test”，否则默认为“development”。

您可以在项目的任何地方进行测试，例如：

if (process.env.NODE_ENV === 'production') {
  console.log('PRODUCTION');
} else if (process.env.NODE_ENV === 'development') {
  console.log('DEVELOPMENT');
} else {
  console.log('OTHER');
}

【讨论】：