uni-app uni-cli打包wgt包时自定义环境变量在nvue页面报undefined，vue页面正常

测试过的手机

华为P50pro

示例代码

package.json依赖内容

{
  "dependencies": {
    "@dcloudio/uni-app": "^2.0.2-3090820231124001",
    "@dcloudio/uni-app-plus": "^2.0.2-3090820231124001",
    "@dcloudio/uni-h5": "^2.0.2-3090820231124001",
    "@dcloudio/uni-i18n": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-360": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-alipay": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-baidu": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-jd": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-kuaishou": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-lark": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-qq": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-toutiao": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-vue": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-weixin": "^2.0.2-3090820231124001",
    "@dcloudio/uni-mp-xhs": "^2.0.2-3090820231124001",
    "@dcloudio/uni-quickapp-native": "^2.0.2-3090820231124001",
    "@dcloudio/uni-quickapp-webview": "^2.0.2-3090820231124001",
    "@dcloudio/uni-stacktracey": "^2.0.2-3090820231124001",
    "@dcloudio/uni-stat": "^2.0.2-3090820231124001",
    "@vue/shared": "^3.0.0",
    "core-js": "^3.8.3",
    "flyio": "^0.6.2",
    "moment": "^2.29.4",
    "vue": ">= 2.6.14 < 2.7",
    "vuex": "^3.2.0"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.3.2",
    "@dcloudio/uni-automator": "^2.0.2-3090820231124001",
    "@dcloudio/uni-cli-i18n": "^2.0.2-3090820231124001",
    "@dcloudio/uni-cli-shared": "^2.0.2-3090820231124001",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-migration": "^2.0.2-3090820231124001",
    "@dcloudio/uni-template-compiler": "^2.0.2-3090820231124001",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-3090820231124001",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.2-3090820231124001",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-3090820231124001",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.2-3090820231124001",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.2-3090820231124001",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-import": "^1.11.0",
    "cross-env": "^7.0.2",
    "jest": "^25.4.0",
    "postcss-comment": "^2.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": ">= 2.6.14 < 2.7"
  }
}

package.json 脚本命令

"build:app-plus-sit": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus VUE_APP_API_ENV=sit vue-cli-service uni-build"

操作步骤

如上代码，新增多个打包环境命令自定义变量 VUE_APP_API_ENV=sit 在vue和nvue中打印process.env.VUE_APP_API_ENV

预期结果

预期都能打印出“sit”

实际结果

vue页面可以打印出“sit” nvue页面打印出“undefined”

bug描述

通过uni cli打包成wgt文件时，发现项目中nvue页面在获取打包自定义环境变量时为undefined，而在vue页面中可以正常获取得到

sinazl 1楼•4 天前

给@dcloudio/vue-cli-plugin-hbuilderx包打了个补丁解决了

caililin 2楼•4 天前

在使用 uni-app 进行打包时，如果你遇到在 nvue 页面中自定义环境变量报 undefined，而在 vue 页面中正常的情况，可能是由于 nvue 页面和 vue 页面的运行环境或编译方式不同导致的。以下是一些可能的原因和解决方案：

1. 检查环境变量的定义和使用

确保你在 vue.config.js 或 env 文件中正确定义了环境变量。
在 vue 页面中，你可以通过 process.env.VUE_APP_YOUR_VARIABLE 来访问环境变量。
在 nvue 页面中，可能需要使用 uni.getEnv().VUE_APP_YOUR_VARIABLE 来访问环境变量。

2. 检查 `nvue` 页面的编译方式

nvue 页面使用的是原生渲染引擎，可能与 vue 页面的运行环境不同。确保你在 nvue 页面中使用的环境变量是兼容的。
如果你在 nvue 页面中使用的是 weex 的语法，可能需要通过 weex 的方式获取环境变量。

3. 在 `nvue` 页面中动态获取环境变量

你可以在 nvue 页面中通过 uni.getEnv() 来获取环境变量，而不是直接使用 process.env。

例如：

const env = uni.getEnv();
console.log(env.VUE_APP_YOUR_VARIABLE);

4. 检查打包配置

确保在打包时，环境变量被正确注入到 nvue 页面中。你可以检查 manifest.json 或 vue.config.js 中的配置，确保环境变量在打包时被正确处理。

5. 使用 `weex` 的 `globalEvent` 传递环境变量

如果 nvue 页面无法直接访问环境变量，你可以在 vue 页面中通过 globalEvent 将环境变量传递给 nvue 页面。

6. 检查 `nvue` 页面的生命周期

确保你在 nvue 页面的生命周期钩子中正确获取了环境变量。例如，在 created 或 mounted 钩子中获取环境变量。

7. 使用 `uni-app` 的 `globalData`

你可以在 App.vue 中通过 globalData 设置环境变量，然后在 nvue 页面中通过 getApp().globalData 来访问。

示例代码：

// App.vue
export default {
  globalData: {
    envVariable: process.env.VUE_APP_YOUR_VARIABLE
  }
}

// nvue 页面
const app = getApp();
console.log(app.globalData.envVariable);