taro 自定义环境变量无法注入到开发环境中

vzgqcmou  于 2023-02-04  发布在  其他
关注(0)|答案(8)|浏览(616)

相关平台

微信小程序

小程序基础库: 2.17.3
使用框架: React

复现步骤

1.在config/dev.js和config/prod/js中自定义了env变量

env: {
    NODE_ENV: '"development"',
    EVN_API: `${DEV_EVN_API}/api`,
    IMG_API: `${DEV_EVN_API}`
  }

2.在config/index.js中merge环境变量之前打印require('./dev')显示env变量正常

3.在微信开发者工具中打印process.env显示一个空对象"{}"

期望结果

期望能够正常注入环境变量

实际结果

并没有注入环境变量

环境信息

Taro CLI 3.2.12 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 7.12.1 - C:\Users\XuKeChu\AppData\Roaming\npm\npm.CMD
46scxncf

46scxncf1#

直接使用 process.env.NODE_ENV 试试

axr492tv

axr492tv2#

我吐了 家人们
需要 env: { API_PREFIX: JSON.stringify('https') } 包一层才行,搞了我两小时

kmbjn2e3

kmbjn2e33#

我吐了 家人们
需要 env: { API_PREFIX: JSON.stringify('https') } 包一层才行,搞了我两小时

冒昧的问一下,所谓的包一层是具体是指什么?能方便看一下prod.js和dev.js的代码么?

x6yk4ghg

x6yk4ghg4#

@xukechu 我是直接在 config/index.js 指定的, 然后通过根目录.env文件配置的

const { API_PREFIX  } = process.env;
const config = {
    env: {
        API_PREFIX: JSON.stringify(API_PREFIX)
    }
    ....
}
cbjzeqam

cbjzeqam5#

这是实际的代码

const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');

const myEnv = dotenv.config();
dotenvExpand(myEnv);

const env = Object.keys(myEnv.parsed).reduce((a, v) => {
  a[v] = JSON.stringify(myEnv.parsed[v]);
  return a;
}, {});

const config = {
  env,
  ...
gv8xihay

gv8xihay6#

这是实际的代码

const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');

const myEnv = dotenv.config();
dotenvExpand(myEnv);

const env = Object.keys(myEnv.parsed).reduce((a, v) => {
  a[v] = JSON.stringify(myEnv.parsed[v]);
  return a;
}, {});

const config = {
  env,
  ...

好的,感谢~

epggiuax

epggiuax7#

这里要感谢楼上两位大佬的代码和思路, 让我完美解决了这个问题, 这里我把自己的处理方式和一些想法贴出来

os : win10
node : 12.22.6
taro : 3.4.9
dotenv : 16.0.1

完整代码如下:
.env :

baseUrl=xxx

config/dev.js :

//...
env: {
    NODE_ENV: '"development"'
  },
//...

config/prod.js :

//...
env: {
    NODE_ENV: '"production"'
  },
//...

config/index.js :

const dotenv = require('dotenv');
const myEnv = dotenv.config();
//...
module.exports = function (merge) {
  const myEnv_parsed = Object.keys(myEnv.parsed).reduce(
    (acc, cur) => {
      acc[cur] = JSON.stringify(myEnv.parsed[cur]);

      return acc;
    },
    {}
  );

  const myConfig = {
    env: myEnv_parsed
  };
  
  if(process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'), myConfig);
  }
  return merge({}, config, require('./prod'), myConfig);
}

然后我们在页面中就能通过 process.env.baseUrl 访问到我们在 .env 文件中设置的 baseUrl 的值了
以及所谓的 包一层 , 是这样的, 举个例子, 是将:

env: {
    NODE_ENV: 'production'
  }

处理为:

env: {
    NODE_ENV: '"production"'
  }

区别就是这个 'production''"production"' , 一层引号和两层引号的区别, 这个如果不处理, 默认将只有一层引号, 那么将会导致 nodejs 报错

n1bvdmb6

n1bvdmb68#

同时 dotenv 里面提到用 es6 import 的方式来使用 dotenv : 如何用import的方式使用dotenv, 它会将 .env 中的变量全部自动加到 process.env 中, 以及推测是由于 config/index.js 最后有 merge 的操作, 导致我们在 .env 中写的变量会被覆盖掉, 页面中访问的时候结果会是 undefined
目前我暂时没有找到用 es6 import 的方式来使用 dotenv 的正确姿势, 想到最后都要走 config/index.js , 因此就直接在 config/index.js 中写了, 而通过 commonjs 的方式使用 dotenv 能有一个 parsed 的字段来接收我们自己的 .env 中的值, 详情参考文档: dotenv document, 这样就会非常方便我们处理自己的环境变量

相关问题