javascript - 在应用程序初始化时将环境值存储在 Vue 中

Question

在使用 VueJS 构建的基本 Web 应用程序中，会调用 API，该 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 时出现的“Dev Notes”导航按钮会出现明显延迟。另外，每次页面加载时，都会调用 API。
为了改进这一点，似乎最好点击 API 一次，当应用程序初始化时，将该值存储在某处的变量中，然后引用该变量以有条件地显示“Dev Notes”导航按钮。对于这么简单的事情，Vuex 似乎有点矫枉过正，而且这个应用程序没有 this post 的 .env 文件。描述如何实现？

Answer 1

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

For example, NODE_ENV will be set to "production" in production mode, "test" in test mode, and defaults to "development" otherwise.

您可以在项目中的任何地方对此进行测试，例如:

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