uni-app nvue页面读取不到uni-cli的构建命令变量

uni-app nvue页面读取不到uni-cli的构建命令变量

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

使用uni-cli客户端生成app打包资源时，为了集成方便，在package.json添加了自定义命令：

"build:app-plus-test": "cross-env VUE_APP_ENV=uat NODE_ENV=production UNI_PLATFORM=app-plus  vue-cli-service uni-build"

然后在vue页面可以读取到VUE_APP_ENV这个变量：process.env.VUE_APP_ENV，但是在nvue页面就是undefined

操作步骤：

使用uni-cli客户端生成app打包资源时，为了集成方便，在package.json添加了自定义命令：

"build:app-plus-test": "cross-env VUE_APP_ENV=uat NODE_ENV=production UNI_PLATFORM=app-plus  vue-cli-service uni-build"

更多关于uni-app nvue页面读取不到uni-cli的构建命令变量的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue页面读取不到uni-cli的构建命令变量的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中无法直接访问 process.env.VUE_APP_ENV 是正常现象，因为 nvue 页面的运行环境与 Vue 页面不同。nvue 页面运行在原生渲染环境中，无法直接访问 Node.js 的 process 对象。

解决方案：

  1. 通过全局变量传递： 在 main.js 或 App.vue 中，将环境变量赋值给一个全局变量，然后在 nvue 页面中访问该全局变量。

    // main.js 或 App.vue
import Vue from 'vue';
Vue.prototype.$env = process.env.VUE_APP_ENV;

    在 nvue 页面中：

    const env = this.$env; // 或 Vue.prototype.$env

  2. 使用 uni-app 的全局变量： 将环境变量存储在 uni 对象的全局属性中。

    // main.js 或 App.vue
uni.$env = process.env.VUE_APP_ENV;

    在 nvue 页面中：

    const env = uni.$env;

  3. 通过页面参数传递： 在跳转到 nvue 页面时，将环境变量作为参数传递。

    uni.navigateTo({
  url: '/pages/nvue-page?env=' + process.env.VUE_APP_ENV
});

    在 nvue 页面中：

    const env = this.$route.query.env; // 或 uni.getCurrentPages()
回到顶部