uniapp + vue3.0 + ts + vuex4开发支付宝小程序的报错处理

本文介绍了在Vue3+Vuex4+TS环境下开发支付宝小程序遇到的三个主要问题及解决方案：1) 使用Vuex时出现'VUE_DEVTOOLS_GLOBAL_HOOK'未定义的错误，解决方法是注释掉特定代码段；2) 自定义组件中使用emit报错，由于支付宝小程序中缺少$属性，通过补丁方式修复；3) 在导入模块时遇到找不到模块的错误，通过修改tsconfig.json中的baseUrl和paths配置解决。这些技巧对于微信小程序则不存在相同问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 vue3+vuex4+ts开发的支付宝小程序，在main.ts上用app.use(store)，报错Cannot read property ‘VUE_DEVTOOLS_GLOBAL_HOOK’ of undefined，运行在微信小程序上不报错

解决办法如下：
进入 /node_modules/vuex/dist/vuex.esm-browser.js 和 /node_modules/vuex/dist/vuex.esm-bundler.js。搜索useDevtools，你会看到以下代码：

var useDevtools = this._devtools !== undefined
    ? this._devtools
    : (process.env.NODE_ENV !== 'production') || __VUE_PROD_DEVTOOLS__

  if (useDevtools) {
    addDevtools(app, this)
  }

将这部分全部注释掉即可

2、开发支付宝小程序，在自定义组件中使用emit会报错TypeError: Cannot read property ‘vnode’ of undefined，在微信小程序端没有问题

原因： 在支付宝端this下面没有$元素，

解决： 已通过下面打补丁的方式解决了这个问题

3、 Cannot find module ‘@/store’ or its corresponding type declarations.

原因： 当前项目的上级目录为根目录， Vetur 不知道当前哪一层文件夹才是真正的根目录

解决： 在 tsconfig.json 中配置 baseUrl 和 paths，store后面加/*

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/store/*":["src/store/*"],
    }
  }
}

4、 Syntax Error: ‘import’ and ‘export’ may only appear at the top level. (20:4)

解决办法如下：export多个工具函数时，少写了}大括号，加上就可以了