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

Question

在使用 VueJS 构建的基本 Web 应用程序中，调用 API 以包含环境名称的对象响应。例如：
https://appsdev/mysimpleapp/api/environment
returns
{"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 一次，当应用程序初始化时，将该值存储在某处的变量中，然后引用该变量以有条件地显示“开发说明”导航按钮。 Vuex 对于这样一个简单的事情来说似乎有点矫枉过正，而且这个应用程序没有 this post 描述的 .env 文件，那么如何实现呢？

Answer 1

您可以使用节点的 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');
}

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

Store environment value in Vue upon app initialization

javascript

node.js

webpack

vue.js

vue-cli