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

问题描述

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

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

它说

[Vue：warn]实例上未定义属性或方法“ process”

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

解决方法

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

每当在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
}

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

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

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

vue-directives vue.js