vue中index.js:978 ReferenceError: h is not defined

Question

编译后h is not defined

<template>
    <div class="alert-box-item">
        <div class="bigImg-div" @click="toGetImg"><img class="bigImg" :src="valueUrl" v-if="valueUrl" /></div>
        <view id="app">
            <button @click="onOff">渐变</button>
            <message v-show="isShow" />
        </view>
    </div>
</template>

<script>
    <remote-script src="../../js/velocity.min.js"></remote-script>;
    <remote-script src="../../js/vue.js"></remote-script>;
    // import '../../js/velocity.min.js' 
    // import '../../js/vue.js'
// <remote src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" />;
// <remote src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js" />
let message = {
    template: `
        <transition name="fade"
        :css="false"
        @before-enter="beforeEnter"
        @enter="enter"
        @before-leave="beforeLeave"
        @leave="leave">
        <div style="width:100px; height:100px; background: red"> 我显示了 </div>
        </transition>
        `
};

let inputElement = null;
export default {
    
    data() {
        return {
            valueUrl: ''
        };
    },
    methods: {
        // diyfun:function(){
        //     realconsole();
        // },
        onOff() {
            this.isShow = !this.isShow;
        },
        beforeEnter(el) {
            el.style.opacity = 0;
        },
        enter(el, done) {
            Velocity(
                el,
                {
                    opacity: 1
                },
                {
                    duration: 50000,
                    complete: done
                }
            );
        },
        beforeLeave(el) {
            el.style.opacity = 1;
        },
        leave(el, done) {
            Velocity(
                el,
                {
                    opacity: 0
                },
                {
                    duration: 500,
                    complete: done
                }
            );
        },
        onOff() {
            this.isShow = !this.isShow;
        },
        toGetImg() {
            if (inputElement === null) {
                // 生成文件上传的控件
                inputElement = document.createElement('input');
                inputElement.setAttribute('type', 'file');
                inputElement.style.display = 'none';

                if (window.addEventListener) {
                    inputElement.addEventListener('change', this.uploadFile, false);
                } else {
                    inputElement.attachEvent('onchange', this.uploadFile);
                }

                document.body.appendChild(inputElement);
            }
            inputElement.click();
        },
        uploadFile(el) {
            if (el && el.target && el.target.files && el.target.files.length > 0) {
                console.log(el);
                const files = el.target.files[0];
                const isLt2M = files.size / 1024 / 1024 < 2;
                const size = files.size / 1024 / 1024;
                console.log(size);
                // 判断上传文件的大小
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                } else if (files.type.indexOf('image') === -1) {
                    //如果不是图片格式
                    // this.$dialog.toast({ mes: '请选择图片文件' });
                    this.$message.error('请选择图片文件');
                } else {
                    const that = this;
                    const reader = new FileReader(); // 创建读取文件对象
                    reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
                    reader.onload = function() {
                        // 文件读取完成后
                        // 读取完成后，将结果赋值给img的src
                        that.valueUrl = this.result;
                        console.log(this.result);
                        // 数据传到后台
                        //const formData = new FormData()
                        //formData.append('file', files); // 可以传到后台的数据
                    };
                }
            }
        }
    },
    beforeDestroy() {
        if (inputElement) {
            if (window.addEventListener) {
                inputElement.removeEventListener('change', this.onGetLocalFile, false);
            } else {
                inputElement.detachEvent('onchange', this.onGetLocalFile);
            }
            document.body.removeChild(inputElement);
            inputElement = null;
            console.log('========inputelement destroy');
        }
    }
};
let vm = new Vue({
    el: '#app',
    data: {
        isShow: false //控制动画 true:显示
    },
    components: {
        message
    }
});

</script>

<style>
.alert-box-item {
    overflow: hidden;
}

.bigImg-div {
    width: 800px;
    height: 800px;
    /* border-radius: 100%; */
    overflow: hidden;
    border: 1px solid #ddd;
}

.bigImg {
    display: block;
    width: 800px;
    height: 800px;
    /* border-radius: 100%; */
}
</style>

运行结果index.js:978 ReferenceError: h is not defined

Hbuilderx vue.js
没有解答思路
Hbuilderx vue.js

Answer 1

报错截个图看看。这个应该不是你代码里的问题吧