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

Question

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

<sidebar></sidebar>

</div>

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

}

Answer 1

楼上说的方法都挺好的.

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)
            }
        }
    })

Answer 2

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

hasSide:process.env.NODE_ENV === 'production'

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

Answer 3

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