ReferenceError: require is not defined 或者是 切换tabbar报错__call_hook导致页面白屏的时候

Question

uniapp真机调试切换tabbar报错ReferenceError: require is not defined 和__call_hook导致页面白屏

Answer 1

ReferenceError: require is not defined
这个问题通常是因为使用了Node.js的模块化语法，而Uniapp是使用了Webpack打包工具，不支持Node.js的模块化语法。解决方案是使用ES6的模块化语法，例如：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

__call_hook导致页面白屏
这个问题通常是因为在页面中使用了__call_hook，但是没有正确地引入vue-router组件。解决方案是在页面中引入vue-router组件，例如：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { RouterMount } from 'uni-simple-router'

export default {
  computed: {
    ...mapState(['userInfo'])
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // do something
    })
  }
}
</script>

注意：在使用vue-router时，需要在main.js中引入并注册路由，例如：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  router,
  ...App
})
app.$mount()