如何在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]属性或方法"过程"；未在实例上定义

如何使用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>