uni-app vue3 H5平台引用的js文件里 #ifdef 编译条件无效

开发环境	版本号	项目创建方式
Windows	Windows10	HBuilderX
HBuilderX	4.26

示例代码：

function Init(){
// #ifdef APP-PLUS
console.log('app');
// #endif
// #ifndef APP-PLUS
console.log('H5');
// #endif
}
export default {
Init: Init
}

操作步骤：

将上述代码创建成js文件在程序点击事件执行

预期结果：

app 输出 ‘app’
其他平台输出 ‘H5’

实际结果：

在H5 平台输出了 app H5

小程序不方便测试建议也测下

bug描述：

uniapp vue3 H5平台引用的.js文件里 #ifdef 编译条件无效

APP平台正常 vue文件里正常只有在H5 引用的 js 里无效

微信小程序没有试建议亲也测试下

h691938207 1楼•3 天前作者

你好，经过测试，输出的是h5，看起来是没有问题的。你可以提供一下更多信息吗？

itying888 2楼•3 天前

需要引用js 直接写在 vue文件里边是没有问题的

wuwangju 3楼•3 天前

回复 lexinkj: 是通过引用的方式的

sinazl 4楼•3 天前

function Init() {
// #ifdef APP-PLUS
console.log(‘app999’);
// #endif
// #ifndef APP-PLUS
console.log(‘H5999’);
// #endif
}
export default {
Init: Init
} import qx from “@/static/js/qx.js”;
onLoad 的里边执行qx.Init()
下边地址是操作视频 chrome 直接打开就行吧 http://zz.jianshuhuodong.top//FileUpload/videoup/202409/9006a0cf3e7305d81bd542dfc09b2365_raw.mp4

ionicwang 5楼•3 天前

可能是你的js文件在static文件中，请把js文件不要放在static文件夹下

sinazl 6楼•3 天前

回复 DCloud_UNI_yuhe: 还真是已解决多谢

wuwangju 7楼•3 天前

在uni-app中使用Vue3开发H5平台应用时，确实会遇到一些编译条件（如#ifdef）不生效的问题。这是因为#ifdef、#ifndef、#else、#elif和#endif这些条件编译指令是DCloud针对小程序等平台特有的预处理指令，主要用于区分不同平台的代码逻辑，而H5平台通常不支持这些预处理指令。

为了解决这个问题，你可以采用环境变量的方式来区分不同平台的代码逻辑。在Vue3和uni-app中，你可以通过定义和使用环境变量来控制代码的执行。以下是一个使用环境变量来区分H5和其他平台的示例：

在manifest.json中定义环境变量：

{
  "mp-weixin": { // 小程序平台配置
    "env": {
      "PLATFORM": "weapp"
    }
  },
  "h5": { // H5平台配置
    "env": {
      "PLATFORM": "h5"
    }
  }
}

在代码中读取环境变量：

在Vue3的setup函数中，你可以使用import.meta.env来访问环境变量。例如：

<script setup>
import { ref } from 'vue';

const platform = ref(import.meta.env.PLATFORM || 'unknown');

function showPlatform() {
  if (platform.value === 'h5') {
    console.log('This is H5 platform.');
    // H5平台特有的代码逻辑
  } else if (platform.value === 'weapp') {
    console.log('This is WeChat Mini Program.');
    // 小程序平台特有的代码逻辑
  } else {
    console.log('Unknown platform.');
  }
}
</script>

<template>
  <button @click="showPlatform">Show Platform</button>
</template>

编译和运行：

当你使用HBuilderX或命令行工具编译项目时，uni-app会根据目标平台自动设置相应的环境变量。在H5平台上，import.meta.env.PLATFORM的值将会是h5，而在小程序平台上，其值将会是weapp。