如何只在本地显示特定的DOM？

Question

.env

APP_ENV=local

---

data() {
        return {
            appEnv: process.env.APP_ENV,

仅用于本地设置，我想显示此调试部分。

<v-col v-if="appEnv == 'local'" cols="6" sm="6" md="9">{{ urlGroups }} </v-col>

我在控制台上没有看到任何错误，但我也没有看到 {{appEnv}}

的任何渲染

我错过了什么？

Answer 1

使用 DOM 中的条件是间接且不可靠的调试方式。而是process.env.APP_ENV需要直接调试，最好有断点。

如果它是用于使用 .env 文件的 Vue CLI 设置，那么问题是 APP_ENV 不适用于浏览器，可以调试它是 undefined。

如 the documentation 所述，自定义环境变量应具有 VUE_APP_ 前缀才能在浏览器中使用。应该是：

VUE_APP_ENV=local

并在 Vue 应用程序中像 process.env.APP_ENV 一样访问。