uni-app vue3项目 条件编译vue3区块中代码未执行

uni-app vue3项目 条件编译vue3区块中代码未执行

示例代码：

import App from './App'  

//#ifndef VUE2
console.log('vue2')
//#endif
//#ifndef VUE3
console.log(vue3)
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
//#endif  

//#ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
//#endif

操作步骤：

Hbuilder X 3.99 新建项目选择默认模版、Vue版本勾选3点击创建，将代码实例中代码粘贴覆盖main.js，运行到微信小程序

预期结果：

控制台输出【vue2】和【vue3】

实际结果：

未执行输出【vue3】，只看到【vue2】

bug描述：

main.js中有// #ifndef VUE3的条件编译，在其代码块中的console.log未执行，// #ifndef VUE2则执行了，检查过manifest.json中vueVersion是3，不知道问题在哪，麻烦告知下

信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 11.2.3 (20D91)
HBuilderX类型 正式
HBuilderX版本号 3.99
第三方开发者工具版本号 1.06.2307260
基础库版本号 3.3.4
项目创建方式 HBuilderX

更多关于uni-app vue3项目 条件编译vue3区块中代码未执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

没发现有问题啊 你发个能复现的demo出来

你编译条件写反了

更多关于uni-app vue3项目 条件编译vue3区块中代码未执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


// #ifndef VUE3 console.log(vue3) 不应该是// #ifdef VUE3 console.log(vue3) 才会输出vue3吗

正解

稍微仔细看下就能找到console放的位置不对吧，两个判断VUE3的代码块，仔细看看啊

复现demo

在 uni-app 项目中，如果你使用了 Vue 3 并且发现条件编译的代码块没有执行，可能是因为条件编译的语法或配置不正确。以下是一些可能的原因和解决方案：

1. 检查条件编译语法

uni-app 的条件编译语法是基于 #ifdef 和 #ifndef 的。确保你使用了正确的语法。

例如：

<template>
  <!-- #ifdef H5 -->
  <div>This is H5 platform</div>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <div>This is not H5 platform</div>
  <!-- #endif -->
</template>

2. 确保平台标识符正确

uni-app 支持多种平台，如 H5、MP-WEIXIN、APP-PLUS 等。确保你使用的平台标识符是正确的。

例如：

  • H5：Web 平台
  • MP-WEIXIN：微信小程序
  • APP-PLUS：App 平台

3. 检查 manifest.json 配置

确保 manifest.json 文件中正确配置了目标平台。例如，如果你希望条件编译在 H5 平台生效，确保 manifest.json 中配置了 h5 平台。

{
  "h5": {
    "router": {
      "mode": "history"
    }
  }
}

4. 检查 vue.config.js 配置

如果你使用了 vue.config.js 进行自定义配置，确保没有覆盖或影响了 uni-app 的条件编译功能。

5. 确保 vue3 版本支持

uni-app 从 2.9.0 版本开始支持 Vue 3，确保你的项目版本符合要求。

6. 调试和日志输出

在条件编译代码块中加入一些调试信息，例如 console.log，看看是否被执行。

<script>
  export default {
    mounted() {
      // #ifdef H5
      console.log('This is H5 platform');
      // #endif
    }
  }
</script>

7. 确保编译环境正确

确保你在正确的编译环境下运行项目。例如，如果你希望在 H5 平台进行条件编译，确保你运行的是 H5 平台的编译命令：

npm run dev:h5

8. 检查 babel 或 webpack 配置

如果你自定义了 babel 或 webpack 配置，确保没有影响到 uni-app 的条件编译功能。

9. 升级 uni-app 版本

如果你使用的是较旧的 uni-app 版本，可能存在一些已知的问题。尝试升级到最新版本。

npm install @dcloudio/uni-app@latest

10. 检查 vue3 的 setup 语法

如果你在 Vue 3 的 setup 函数中使用条件编译，确保语法正确。

<script setup>
  // #ifdef H5
  console.log('This is H5 platform');
  // #endif
</script>
回到顶部