uni-app Vue3+ts+vite编译h5端defineExpose等编译器宏不生效

uni-app Vue3+ts+vite编译h5端defineExpose等编译器宏不生效

开发环境 版本号 项目创建方式
Mac 14.4.1 CLI
Chrome 123

操作步骤：

<script lang="ts" setup>  
function show() {  
    console.log('show')  
}  
defineExpose({ show })  
</script>

预期结果：

父页面中可通过ref的值获取到子组件的函数

实际结果：

父组件不能获取子组件暴露的函数，因为defineExpose未定义

bug描述：

Vue3+ts+vite环境下组合式API使用setup语法糖编译h5端defineExpose等编译器宏不生效，提示“defineExpose is not defined” 相对应的还有provide、inject等 小程序没问题，其他端未测试，目前只发现在H5端存在异常 在2023年4月份已经有人反映过该问题，至今未解决


更多关于uni-app Vue3+ts+vite编译h5端defineExpose等编译器宏不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

一年多了，H5端还没好

更多关于uni-app Vue3+ts+vite编译h5端defineExpose等编译器宏不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 Vue 3 + TypeScript + Vite 开发 H5 端时，如果 defineExpose 等编译器宏不生效，可能是由于以下原因导致的：

1. 确保 Vue 3 版本兼容

  • defineExpose 是 Vue 3.2+ 引入的特性，确保你的 Vue 版本是 3.2 或更高版本。
  • 检查 package.json 中 vue 的版本：
    "dependencies": {
  "vue": "^3.2.0"
}

2. 确保 script setup 语法正确

  • defineExpose 只能在 <script setup> 语法中使用。确保你的组件使用了 <script setup> 语法。
  • 示例：
    <script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

defineExpose({
  count
})
</script>

3. 确保 Vite 配置正确

  • 确保 vite.config.ts 中正确配置了 Vue 插件。
  • 示例：
    import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

4. 检查 TypeScript 配置

  • 确保 tsconfig.json 中正确配置了 compilerOptions，特别是 types 和 lib，以支持 Vue 3 和 TypeScript。
  • 示例：
    {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["dom", "esnext"],
    "types": ["vite/client", "vue"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

5. 确保 uni-app 配置正确

  • uni-app 的 H5 端配置可能需要特别注意。确保 manifest.json 中的 h5 配置正确。
  • 示例：
    {
  "h5": {
    "router": {
      "mode": "history"
    }
  }
}

6. 清理缓存和重新编译

  • 有时候，缓存可能导致构建问题。尝试清理缓存并重新编译项目：
    rm -rf node_modules/.vite
npm install
npm run dev
回到顶部