uni-app 删除 main.js 的 App.mpType = 'app' 后运行 H5 报错 Cannot read property 'meta' of undefined

uni-app 删除 main.js 的 App.mpType = ‘app’ 后运行 H5 报错 Cannot read property ‘meta’ of undefined

前因

当前代码构建微信小程序可正常运行，但是无法运行H5，运行起来提示如下错误

chunk-vendors.js:4427 [Vue warn]: Property or method "keepAliveInclude" is not defined on the instance but referenced during render. Make sure that this property is   
chunk-vendors.js:4427 [Vue warn]: Error in render: "TypeError: Cannot read property 'meta' of undefined"

刚接触 uniapp，搜了一圈错误信息也没有找到问题所在，于是新建demo组个文件对比发现是 main.js 中我把 App.mpType = 'app' 删除了导致的。

后果

补齐 main.js 的 App.mpType = 'app' 即可。

找到原因还是花费了一些时间，故记录一二，以便后者搜索错误提示就可以找到问题~

关于 App.mpType = 'app' 所能找到的说明

小程序页面组件和这个 App.vue 组件的写法和引入方式是一致的，为了区分两者，需要设置 mpType 值


更多关于uni-app 删除 main.js 的 App.mpType = 'app' 后运行 H5 报错 Cannot read property 'meta' of undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 删除 main.js 的 App.mpType = 'app' 后运行 H5 报错 Cannot read property 'meta' of undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，App.mpType = 'app' 这行代码用于指定应用类型为小程序（mp即mini program的缩写）。当你移除这行代码并尝试运行 H5 平台时，uni-app 框架内部可能会因为缺少特定类型标识而进入不兼容的状态，从而导致一些内部逻辑错误，比如你遇到的 Cannot read property 'meta' of undefined。

这个问题通常是因为某些组件或API调用在不正确的平台环境下被触发，而框架内部处理这些调用时依赖于 mpType 或其他平台标识来决定行为。虽然直接修复这个问题可能比较复杂，因为需要深入到框架内部处理逻辑，但我们可以尝试通过代码调整来规避这类错误。

一个可能的解决方案是在你的项目中显式地处理平台差异，确保在H5环境下不调用小程序特有的API或组件。以下是一个基本的示例，展示如何根据平台类型来条件性地执行代码：

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

Vue.config.productionTip = false

// 判断当前平台
const platform = uni.getSystemInfoSync().platform

if (platform === 'h5') {
    // 如果是H5平台，进行特定的初始化
    console.log('Running on H5 platform')
    // 这里可以添加H5特有的代码逻辑
} else if (platform.startsWith('ios') || platform.startsWith('android')) {
    // 如果是小程序平台，进行特定的初始化（虽然你已经移除了mpType，但这里仅作示例）
    console.log('Running on Mini Program platform')
    // 注意：这里的代码实际上在小程序环境中才应该运行，H5中不应执行
    // App.mpType = 'app' // 这行代码在你的情况下已被移除
} else {
    console.log('Unknown platform:', platform)
}

new Vue({
    render: h => h(App),
}).$mount('#app')

在上面的代码中，我们通过 uni.getSystemInfoSync().platform 获取当前平台信息，并根据平台类型执行不同的初始化逻辑。注意，这里的代码示例主要用于展示如何根据平台类型进行条件判断，而不是直接解决你遇到的 meta 属性未定义的问题。

对于 Cannot read property 'meta' of undefined 错误，这通常意味着某处代码尝试访问一个未初始化或未定义对象的 meta 属性。你需要检查触发这个错误的代码位置，确保在访问 meta 属性前，相关对象已被正确初始化。这可能需要你审查项目中所有可能涉及 meta 属性的地方，特别是在页面跳转、组件生命周期或全局状态管理中。

回到顶部