uni-app 在 vue2 环境中 package.json 配置 env 环境变量无效

uni-app 在 vue2 环境中 package.json 配置 env 环境变量无效

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

产品分类：uniapp/H5

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

浏览器平台：Chrome

浏览器版本：最新版本

3 回复

直接打印process.env不会显示，直接使用就好了，可以正常使用的。比如你process.env打印出来虽然是 BASE_URL “/”
NODE_ENV “development”
VUE_APP_DARK_MODE “false”
VUE_APP_INDEX_CSS_HASH “2da1efab”
VUE_APP_INDEX_DARK_CSS_HASH “e6047db7”
VUE_APP_NAME “万峰安培”
VUE_APP_PLATFORM “h5” 但是你打印process.env.VUE_APP_APPID也依然可以正常获取

更多关于uni-app 在 vue2 环境中 package.json 配置 env 环境变量无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


！！！ 还真是，服啦

在 uni-app 项目中，如果你在 package.json 中配置了 env 环境变量，但在 Vue 2 环境中发现这些变量无效，可能是由于以下几个原因：

1. 环境变量的配置方式不正确

在 uni-app 中，环境变量的配置通常是通过 .env 文件来实现的，而不是直接在 package.json 中配置。

你可以在项目根目录下创建 .env 文件来定义环境变量，例如：

VUE_APP_API_URL=https://api.example.com
VUE_APP_DEBUG=true

然后在代码中通过 process.env.VUE_APP_API_URL 来访问这些变量。

2. process.env 未被正确处理

在 uni-app 中，process.env 可能没有被正确地注入到项目中。你可以尝试以下方法：

  • 确保你使用的是 uni-app 官方支持的构建工具（如 HBuilderX 或 vue-cli）。
  • 如果你使用的是 vue-cli，确保你已经安装了 @vue/cli-plugin-env 插件，并且在 vue.config.js 中正确配置了环境变量。

3. vue.config.js 中的配置

如果你使用的是 vue-cli，可以在 vue.config.js 中配置环境变量：

module.exports = {
  // 其他配置...
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          VUE_APP_API_URL: JSON.stringify(process.env.VUE_APP_API_URL),
          VUE_APP_DEBUG: JSON.stringify(process.env.VUE_APP_DEBUG),
        },
      }),
    ],
  },
};

4. 使用 uni-app 的 manifest.json

如果你需要在 uni-app 中使用环境变量，可以在 manifest.json 中配置 env 变量，并在代码中通过 uni.getSystemInfoSync().env 来访问。

5. 检查 package.json 中的 scripts

如果你确实需要在 package.json 中配置环境变量，可以通过 scripts 来传递环境变量：

"scripts": {
  "serve": "VUE_APP_API_URL=https://api.example.com vue-cli-service serve",
  "build": "VUE_APP_API_URL=https://api.example.com vue-cli-service build"
}
回到顶部