uni-app Vue3 自定义编译条件不生效且报错

uni-app Vue3 自定义编译条件不生效且报错

产品分类：

uniapp/H5

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

w10

HBuilderX类型：

正式

HBuilderX版本号：

3.2.9

浏览器平台：

Chrome

浏览器版本：

94

项目创建方式：

HBuilderX

示例代码：

"uni-app": {
  "scripts": {
    "H5-dev": {
      "title": "开发环境H5",
      "env": {
        "UNI_PLATFORM": "h5"
      },
      "define": {
        "ENV-DEV": true
      }
    },
    "mp-dingtalk": {
      "title": "钉钉小程序",
      "env": {
        "UNI_PLATFORM": "mp-alipay"
      },
      "define": {
        "MP-DINGTALK": true
      }
    }
  }
}

// #ifndef ENV-DEV
console.log('ENV-DEV')
// #endif

操作步骤：

运行到自定义环境

预期结果：

不报错

实际结果：

14:18:49.274 2:18:48 ┤F10: PM┤ [vite] Internal server error: ENV_DEV is not defined
14:18:49.274   Plugin: vite:uni-pre
14:18:49.276   File: D:/test/uniapp_vue3/hello/App.vue
...

bug描述：

Vue 3 自定义条件编译不生效


更多关于uni-app Vue3 自定义编译条件不生效且报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

更新到HBuilderX 3.2.10 alpha 是否还存在此问题？

更多关于uni-app Vue3 自定义编译条件不生效且报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


vue3 可以直接执行cli命令 npm run dev:h5 H5-dev 吗？最新版本3.3.10执行自定义编译模式都不生效

回复 c***@swiftpass.cn: 详见文档 请查看相关问题：https://ask.dcloud.net.cn/question/139125

HBuilderX 3.3.11已修复

根据你的描述，这是一个在 uni-app Vue3 项目中使用自定义条件编译时遇到的常见问题。核心原因在于 Vue3 项目（使用 Vite 构建）与 Vue2 项目（使用 Webpack 构建）处理条件编译的方式有显著区别。

你的配置和代码在 Vue2 项目中是有效的，但在 Vue3 项目中，package.json 里 uni-app 节点下的自定义编译条件定义不会被 Vite 读取，因此 ENV-DEV 这个条件编译标记未被定义，导致预处理阶段报错 ENV_DEV is not defined。

解决方案如下：

你需要将自定义的条件编译变量定义在项目的根目录下的 vite.config.js (或 vite.config.ts) 配置文件中。这是 Vite 构建工具的入口配置文件。

  1. 创建或修改 vite.config.js： 在你的项目根目录下，找到或创建 vite.config.js 文件。

  2. 配置 define 选项： 在 vite.config.js 中，你需要使用 define 选项来定义全局的替换常量。这与你在 package.json 中尝试做的 define 是类似概念，但这里是 Vite 的正确配置位置。

    // vite.config.js
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()],
  define: {
    // 在这里定义你的自定义条件编译常量
    // 键名需要与你条件编译中使用的完全一致
    'ENV-DEV': true, // 或 false，根据你的环境逻辑
    'MP-DINGTALK': false, // 示例
  }
})

  3. 修改你的条件编译代码： 你的条件编译语法是正确的，无需更改。确保代码中的标记与 vite.config.js 中 define 的键名一致。

    // #ifdef ENV-DEV
console.log('ENV-DEV 已定义，这段代码在开发环境H5下会执行');
// #endif

// #ifdef MP-DINGTALK
console.log('这段代码在定义了MP-DINGTALK时为true时会执行');
// #endif
回到顶部