H5W3
当前位置:H5W3 > 问答 > 正文

vue中开发生产环境配置不同的组件,如何做

vue里,我想在开发环境要sidebar组件,打包生产环境不要它,置空,如何做呢
<div>

<sidebar></sidebar>

</div>

mounted(){
process.env.NODE_ENV === ‘production’ 这里怎么做

}

回答

<sidebar v-if=”!hasSide”></sidebar>

hasSide:process.env.NODE_ENV === ‘production’

想到了这种,感觉能用render做,不知道还有别的办法吗

使用directive可以使用自定义指令 v-hasSide
或者
可以挂载到Vue下。 this.xxx

楼上说的方法都挺好的.

1.

<sidebar v-if="show"></sidebar>
computed:{
    show() {
        return process.env.NODE_ENV === 'production'
    }
}

2.

//sidebar.vue
render() {
    return process.env.NODE_ENV === 'production' ? null : '你的组件'
}

3.
自定义指令,自定义指令对于多个组件都有这个逻辑会方便一点

    Vue.directive('hasSide', {
        inserted(el, binding, vnode) {
            if (process.env.NODE_ENV === 'production') {
                el.parentNode.removeChild(el)
            }
        }
    })

未经允许不得转载:H5W3 » vue中开发生产环境配置不同的组件,如何做

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址