Dotenv 没有以字符串形式获取值答案

【问题标题】：Dotenv not getting value as stringDotenv 没有以字符串形式获取值
【发布时间】：2019-06-20 06:58:54
【问题描述】：

我已经安装了 dotenv 来设置开发和生产环境变量，其中一个变量是 ROOT_API，我的 env 文件看起来像这样

NODE_ENV=dev
ROOT_API=http://localhost/project/public/
PORT=8000

我在 axios 中设置了我的 api 请求配置，并像这样按照 dotenv repo 中的步骤进行操作

require('dotenv').config({path: `${__dirname}/../.env`})
//I asume this is right as the value get returned 
//but there does not say that i have to configure anything else
export const http = axios.create({
  baseURL: process.env.ROOT_API + 'api/',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': tokenType + ' ' + token
  }
})

我希望process.env.ROOT_API 将值作为字符串返回，但在控制台中我看到错误Uncaught SyntaxError: Unexpected token : 当我看到问题出在哪里时，值显示为

var http = __WEBPACK_IMPORTED_MODULE_5_axios___default.a.create({
  baseURL: http://localhost/project/public/ + 'api/',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': tokenType + ' ' + token
  }
});

我试过了

在.env 文件中使用不同的引号
将process.env.ROOT_API 转换为字符串或记录值的类型，但得到错误SyntaxError: missing ) after argument list，因为该值在js 中看起来像纯文本。
使用像${process.env.ROOT_API}这样的模板文字；显示在console > sources '' + http://localhost/project/public/; //我不知道如何显示`引号它像代码一样显示它抱歉。

我执行console.log 以查看process.env 在控制台中的内容，这就是它所显示的内容

   ...
   PWD: 'C:/xampp/htdocs/project',
   ROOT_API: 'http://localhost/erp-api/public/',
   SESSIONNAME: 'Console',
   ...

我该如何解决这个问题？我不明白为什么它不能将值作为字符串获取？

【问题讨论】：

如何在代码中加载 dotEnv 配置？
已编辑，我只是按照 repo 步骤操作。
您是否尝试过包含换行引号的模板文字？ baseURL: `'${process.env.ROOT_API}api/'`
是的，结果一样

标签： javascript vue.js webpack dotenv

【解决方案1】：

有点晚了......但遵循我的解决方案。

  ...
  plugins: [
    new webpack.DefinePlugin({
    'process.env': JSON.stringify(dotenv.parsed)
  })

将所有内容转换为字符串，不再出现随机错误；)

【讨论】：

【解决方案2】：

我遇到了同样的问题，这就是我所做的：

如果您使用webpack.DefinePlugin()，请改用webpack.EnvironmentPlugin()，并在其中使用Object.keys() 获取dotenv.parsed 键，如下所示：

// webpack.config.js

const webpack = require('webpack')
const dotenv = require('dotenv').config()

module.exports = {

//...other configs

  plugins: [
     new webpack.EnvironmentPlugin(Object.keys(dotenv.parsed || {})),
  ]
]

【讨论】：

为我解决了这个问题。当我遇到问题时，我正在使用本教程。 dev.to/sanfra1407/…

【解决方案3】：

将此包安装为开发依赖项 (https://www.npmjs.com/package/dotenv-webpack)：

npm install  --dev  dotenv-webpack

或

yarn add -D dotenv-webpack

之后，只需将此代码添加到您的 webpack 文件中：

     const Dotenv = require('dotenv-webpack');

        module.exports = {
          ...
          plugins: [
            new Dotenv()
          ]
          ...
        };

参考链接：https://www.npmjs.com/package/dotenv-webpack

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

【解决方案4】：

您的代码应该可以正常运行。我认为它没有问题，我只是在没有 webpack 的情况下对其进行了验证。

如果

baseURL: process.env.ROOT_API + 'api/'

翻译如下：

baseURL: http://localhost/project/public/ + 'api/', 表示你的转译有问题。您应该在那里检查问题（或使用有关您的 webpack 配置和使用的更多信息更新问题）

【讨论】：