如何在 v-bind 属性中使用 proccess.env 变量？

Question

我想在 v-bind 属性中使用全局对象，尤其是 proccess.env 变量。

<base-pagination
        v-model="currentPage"
        :per-page="process.env.PAGE_SIZE"
        :total="totalPages"
        @change="handleChange"
 ></base-pagination>

它说

[Vue:warn] Property or method "process" is not defined on the instance

如何在Vue.js模板中使用全局对象（console、process、...）？

Answer 1

就我而言，这是不可能的，因为：

无论何时在 vue 中使用模板，您也在以某种方式使用 vue 模板编译器。所有的模板表达式都会被转为渲染函数，模板编译器生成的源代码如下所示：

with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No message.")])])}

注意开头的 with(this) 语句。因此，将始终在实例上访问剩余函数中的每个引用。

但是您始终可以创建一个计算属性并使用此值：

...
computed: {
   PAGE_SIZE: () => process.PAGE_SIZE
}

Answer 2

不能直接在html中使用，可以添加到创建的钩子中。为什么在创建的钩子中。在创建的钩子中定义它时，它不是反应性的。注意：您不必在数据中定义 pageSize。

created () {
    this.pageSize= process.env.PAGE_SIZE
}

<base-pagination
        v-model="currentPage"
        :per-page="pageSize"
        :total="totalPages"
        @change="handleChange"
 ></base-pagination>

如何在 v-bind 属性中使用 proccess.env 变量？

How to use proccess.env variable in v-bind attribute?

vue.js

vue-directives