注意：

Question

我已经尝试了所有解决方案，但似乎没有一个适合我。我只想将一些值存储在Vue应用程序中的.env文件中，但仅尝试登录process.env就会从组件内部返回一个空对象。

我的.env文件

VUE_APP_URL={api url}
VUE_APP_TOKEN={token}

我的计划是将这些环境变量设置为数据属性，但它始终返回undefined。如果我从webpack.config.js中进行console.log(process.env.NODE_ENV)操作，它将显示我正在开发中，但是如果我尝试在类似

的组件中进行同样的操作

mounted() {
    this.$nextTick(() => {
      console.log(process.env.VUE_APP_URL);
    })
  }

它仅返回undefined。

Answer 1

为在此居住的人提供的一些提示：

确保您的.env文件位于项目的根文件夹中（而不是src/）
变量名称应以 VUE_APP_开头（如果要静态地嵌入到客户端包中）
重新启动开发服务器/运行构建以使更改生效。

Answer 2

我知道了-我必须安装dotenv-webpack并在webpack.config.js中对其进行初始化，这很奇怪，因为没有文档说明我需要这样做。

Answer 3

按如下所示安装dotenv-webpack并配置vue.config.js文件。

npm install dotenv-webpack --save-dev

将此添加到您的配置文件中：

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


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

请确保在.env文件中，像这样的变量前添加VUE_APP_：

VUE_APP_VAR1=example
VUE_APP_VAR2=value

现在您可以在Vue应用程序中访问以下变量：

console.log(process.env.VUE_APP_VAR1); // "example"
console.log(process.env.VUE_APP_VAR2); // "value"

这里有一些链接可供参考：

Answer 4

Vue CLI dotenv 的使用无法提供除以 .env 为前缀的 VUE_APP_ 变量。这是可以的，但这远远不足以满足任何想要方便和安全地管理其（有时是大量）变量以适应不同环境的小型网络项目。

这里的解决方案使用 .env 变量与使用 dotenv 的后端一样方便。

使用此解决方案，您可以像 MY_EXTERNAL_API_KEY 这样的代码中的 .env.[environment] 文件访问您的 const key = process.env.MY_EXTERNAL_API_KEY。

它提供：

使用无前缀的VUE_APP_变量名和使用.env变量expansion feature（使用${VARNAME}类变量）的便利
必要的安全性：您的变量既不能在运行时通过 console.log(pocess.env.MYVAR) 在浏览器控制台中使用，也不能通过构建应用程序的 JS 包中的文本搜索进行探索。
您仍然可以同时使用 original Vue CLI solution；

为此，请在您的 dotenv-webpack 中使用 vue.config.js 插件，如下所示：

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

const envPath = function() {
    return (!process.env.NODE_ENV || (process.env.NODE_ENV === 'development')) ?
        './.env' :
        `./.env.${process.env.NODE_ENV}`;
}

const dotenvArgs = {
    expand: true,
    path: envPath()
};

module.exports = {
   //... some other config here
    configureWebpack: {
        plugins: [
            new Dotenv(dotenvArgs)
        ]
    }
};

这里：

expand: true 允许 ${MYVAR} 变量扩展；
path: envPath() 允许定义自定义的 .env 文件名 depending on your Vue CLI project environments，路径取决于您的项目结构；

您可以使用其他有用的 dotenv-webpack options。

我相信这个解决方案足以完全满足最常见的用例。

注意：请记住，当您通过来自前端的 HTTP 请求（例如调用某些外部 API 时的 API 密钥）传递您的秘密变量时，任何知道在哪里查找的人都可以看到它们。为了减少这种情况的安全风险，有不同的解决方案。

只是暗示你必须：

仅通过您的应用程序提供公开开放的数据；
或通过某种身份验证服务（登录名/密码 + JWT|会话、外部身份验证提供商，例如 Facebook、Google 等）对您的应用程序（或其中的一部分）进行身份验证；
或求助于服务器生成的应用程序。

但这是一个单独的主题。

Answer 5

如果您的 vue-cli 版本高于 3.x ，并且您将.env文件放在根目录中，如注释中所述。比起您可以从组件（例如.\b2 -j8 toolset=msvc address-model=64 architecture=x86 link=shared threading=multi binary-format=pe abi=ms runtime-link=shared）访问您的环境变量。如vue-cli docs

中所述

只有以compile-c-c++ bin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi\execution_context.obj execution_context.cpp Unknown compiler version - please run the configure tests and report the results C:\boost_1_58_0\boost/context/execution_context.hpp(140): error C2492: 'boost::context::execution_context::main_ctx_': data with thread storage duration may not have dll interface C:\boost_1_58_0\boost/context/execution_context.hpp(140): warning C4251: 'boost::context::execution_context::main_ctx_': struct 'boost::context::execution_context::fcontext' needs to have dll-interface to be used by clients of class 'boost::context::execution_context' C:\boost_1_58_0\boost/context/execution_context.hpp(59): note: see declaration of 'boost::context::execution_context::fcontext' C:\boost_1_58_0\boost/context/execution_context.hpp(140): error C2492: 'private: static boost::context::execution_context::fcontext boost::context::execution_context::main_ctx_': data with thread storage duration may not have dll interface C:\boost_1_58_0\boost/context/execution_context.hpp(141): error C2492: 'boost::context::execution_context::current_ctx_': data with thread storage duration may not have dll interface C:\boost_1_58_0\boost/context/execution_context.hpp(141): warning C4251: 'boost::context::execution_context::current_ctx_': class 'boost::intrusive_ptr<boost::context::execution_context::fcontext>' needs to have dll-interface to be used by clients of class 'boost::context::execution_context' C:\boost_1_58_0\boost/context/execution_context.hpp(138): note: see declaration of 'boost::intrusive_ptr<boost::context::execution_context::fcontext>' C:\boost_1_58_0\boost/context/execution_context.hpp(141): error C2492: 'private: static boost::intrusive_ptr<boost::context::execution_context::fcontext> boost::context::execution_context::current_ctx_': data with thread storage duration may not have dll interface C:\boost_1_58_0\boost/context/execution_context.hpp(143): warning C4251: 'boost::context::execution_context::ptr_': class 'boost::intrusive_ptr<boost::context::execution_context::fcontext>' needs to have dll-interface to be used by clients of class 'boost::context::execution_context' C:\boost_1_58_0\boost/context/execution_context.hpp(138): note: see declaration of 'boost::intrusive_ptr<boost::context::execution_context::fcontext>' call "C:\Users\admin\AppData\Local\Temp\b2_msvc_14.0_vcvarsall_x86_amd64.cmd" >nul cl /Zm800 -nologo @"bin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi\execution_context.obj.rsp" ...failed compile-c-c++ bin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi\execution_context.obj... ...skipped <pbin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi>boost_context-vc140-mt-gd-1_58.dll for lack of <pbin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi>execution_context.obj... ...skipped <pstage\lib>boost_context-vc140-mt-gd-1_58.dll for lack of <pbin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi>boost_context-vc140-mt-gd-1_58.dll... ...skipped <pbin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi>boost_context-vc140-mt-gd-1_58.lib for lack of <pbin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi>execution_context.obj... ...skipped <pstage\lib>boost_context-vc140-mt-gd-1_58.lib for lack of <pbin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi>boost_context-vc140-mt-gd-1_58.lib... ...skipped <pbin.v2\libs\coroutine\build\msvc-14.0\debug\address-model-64\threading-multi>boost_coroutine-vc140-mt-gd-1_58.dll for lack of <pbin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi>boost_context-vc140-mt-gd-1_58.lib... ...skipped <pstage\lib>boost_coroutine-vc140-mt-gd-1_58.dll for lack of <pbin.v2\libs\coroutine\build\msvc-14.0\debug\address-model-64\threading-multi>boost_coroutine-vc140-mt-gd-1_58.dll... ...skipped <pbin.v2\libs\coroutine\build\msvc-14.0\debug\address-model-64\threading-multi>boost_coroutine-vc140-mt-gd-1_58.lib for lack of <pbin.v2\libs\context\build\msvc-14.0\debug\address-model-64\threading-multi>boost_context-vc140-mt-gd-1_58.lib... ...skipped <pstage\lib>boost_coroutine-vc140-mt-gd-1_58.lib for lack of <pbin.v2\libs\coroutine\build\msvc-14.0\debug\address-model-64\threading-multi>boost_coroutine-vc140-mt-gd-1_58.lib... compile-c-c++ bin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi\execution_context.obj execution_context.cpp Unknown compiler version - please run the configure tests and report the results .\boost/context/execution_context.hpp(140): error C2492: 'boost::context::execution_context::main_ctx_': data with thread storage duration may not have dll interface .\boost/context/execution_context.hpp(140): warning C4251: 'boost::context::execution_context::main_ctx_': struct 'boost::context::execution_context::fcontext' needs to have dll-interface to be used by clients of class 'boost::context::execution_context' .\boost/context/execution_context.hpp(59): note: see declaration of 'boost::context::execution_context::fcontext' .\boost/context/execution_context.hpp(140): error C2492: 'private: static boost::context::execution_context::fcontext boost::context::execution_context::main_ctx_': data with thread storage duration may not have dll interface .\boost/context/execution_context.hpp(141): error C2492: 'boost::context::execution_context::current_ctx_': data with thread storage duration may not have dll interface .\boost/context/execution_context.hpp(141): warning C4251: 'boost::context::execution_context::current_ctx_': class 'boost::intrusive_ptr<boost::context::execution_context::fcontext>' needs to have dll-interface to be used by clients of class 'boost::context::execution_context' .\boost/context/execution_context.hpp(138): note: see declaration of 'boost::intrusive_ptr<boost::context::execution_context::fcontext>' .\boost/context/execution_context.hpp(141): error C2492: 'private: static boost::intrusive_ptr<boost::context::execution_context::fcontext> boost::context::execution_context::current_ctx_': data with thread storage duration may not have dll interface .\boost/context/execution_context.hpp(143): warning C4251: 'boost::context::execution_context::ptr_': class 'boost::intrusive_ptr<boost::context::execution_context::fcontext>' needs to have dll-interface to be used by clients of class 'boost::context::execution_context' .\boost/context/execution_context.hpp(138): note: see declaration of 'boost::intrusive_ptr<boost::context::execution_context::fcontext>' call "C:\Users\admin\AppData\Local\Temp\b2_msvc_14.0_vcvarsall_x86_amd64.cmd" >nul cl /Zm800 -nologo @"bin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi\execution_context.obj.rsp" ...failed compile-c-c++ bin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi\execution_context.obj... ...skipped <pbin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi>boost_context-vc140-mt-1_58.dll for lack of <pbin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi>execution_context.obj... ...skipped <pstage\lib>boost_context-vc140-mt-1_58.dll for lack of <pbin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi>boost_context-vc140-mt-1_58.dll... ...skipped <pbin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi>boost_context-vc140-mt-1_58.lib for lack of <pbin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi>execution_context.obj... ...skipped <pstage\lib>boost_context-vc140-mt-1_58.lib for lack of <pbin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi>boost_context-vc140-mt-1_58.lib... ...skipped <pbin.v2\libs\coroutine\build\msvc-14.0\release\address-model-64\threading-multi>boost_coroutine-vc140-mt-1_58.dll for lack of <pbin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi>boost_context-vc140-mt-1_58.lib... ...skipped <pstage\lib>boost_coroutine-vc140-mt-1_58.dll for lack of <pbin.v2\libs\coroutine\build\msvc-14.0\release\address-model-64\threading-multi>boost_coroutine-vc140-mt-1_58.dll... ...skipped <pbin.v2\libs\coroutine\build\msvc-14.0\release\address-model-64\threading-multi>boost_coroutine-vc140-mt-1_58.lib for lack of <pbin.v2\libs\context\build\msvc-14.0\release\address-model-64\threading-multi>boost_context-vc140-mt-1_58.lib... ...skipped <pstage\lib>boost_coroutine-vc140-mt-1_58.lib for lack of <pbin.v2\libs\coroutine\build\msvc-14.0\release\address-model-64\threading-multi>boost_coroutine-vc140-mt-1_58.lib... ...failed updating 2 targets... ...skipped 16 targets...开头的变量将通过process.env.VUE_APP_YOUR_VARIABLE静态地嵌入到客户端包中。您可以访问他们在您的应用程序代码中：VUE_APP_

Answer 6

所以我用 VUE_APP_API_URL（无效）然后我将其更改为 VUE_APP_APIURL（有效）

希望有帮助

Answer 7

这对我有用。我以前通过在VS Code中的Exploer中右键单击并添加一个新文件，手动在根文件夹中创建了.env.development和.env.production文件。这让我一直不确定。

我删除了文件，并首先安装了npm install touch-cli -g 安装完成后，我添加了环境文件，例如touch .env.production和touch .env.production并成功运行。因此，我认为这些环境文件的生成方式有所不同。

注意：我没有安装Webpack。只是使用vue cli来构建

VS Code Explorer Chrome Developer Tools

Answer 8

我将.env文件放在根目录中，并在每个变量后附加VUE_APP_。

例如，如果您要使用的变量为API_BASE_URL

，以进行演示。

在您的.env文件中，将变量放置为VUE_APP_API_BASE_URL=baseurl/api/v1

要访问文件中的文件，请执行process.env.VUE_APP_API_BASE_URL。

注意：

请不要在前端放置您不希望任何人看到的任何敏感信息。您不希望任何人看到的（关于Web开发）最常见的事情是您的API密钥。这样做有实际的后果。 This就是一个这样的例子，有人被烧死向公众公开API密钥。

但是，即使您将敏感数据放入.env文件中，并将.env文件添加到.gitignore文件中（因此也不能将其推送到Git存储库托管服务，例如Github），BitBucket，Gitlab等），则您的数据在前端仍然不安全。只有在后端代码上完成此操作时，它才是安全的，因为它将托管在服务器上。

在前端，任何有足够决心的人都可以找到您的敏感信息。您所有的信息都可在浏览器上找到，该人所需要做的就是打开dev tools并选中Sources标签，然后BOOM将所有敏感信息暴露出来。

仅当您想要一个非敏感信息（例如BASE URL）的参考点时，前端的环境变量才有用，如上例所示。在开发过程中，BASE URL可能会更改，并且您不想手动更改应用程序文件夹中的所有引用。这很麻烦，而且您可能会错过一些，这会导致错误。

如果您想避免在前端公开您的API密钥和其他敏感信息，请查看此article。

Answer 9

它也可能有帮助：确保你的 .env 文件是小写字母，因为在 Linux 中它不会工作，即使它在 Windows 中工作

Vue-cli 3环境变量均未定义

9 个答案:

注意：