运行 cross-env NODE_ENV=development webpack-dev-server --open --hot 时，无法在 vue js 中使用 .env 文件

Question

我正在尝试将 .env 文件用于局部变量，但是当我尝试对它们进行控制台时，它显示为未定义。

下面是我的 .env 文件（位于我的项目的根目录）

VUE_APP_STRAPI_HOST=http://localhost:1337/

我在尝试控制台记录时使用以下内容：

console.log(process.env.VUE_APP_STRAPI_HOST)

这是我再次在命令行中运行的内容：

cross-env NODE_ENV=development webpack-dev-server --open --hot 

我在想这可能与跨环境有关吗？

Answer 1

简短：

require('dotenv').config()

特尔；博士：

您创建.env文件的事实与环境变量无关。 在 bash（或任何其他 sh 系统）中，您需要

• 使用命令export VUE_APP_STRAPI_HOST=http://localhost:1337/ ; 然后运行你的过程
• 要么使用VUE_APP_STRAPI_HOST=http://localhost:1337/ node webpack-dev-server --open --hot 。

只需创建一个.env文件（以及具有任何其他名称的文件）不会将其中的变量神奇地导出到 env 变量到您的进程。 这同样适用于cross-env ，因为我在这个包中没有看到任何让它这样做的文档。

你可能想要的是dotenv ：

require('dotenv').config()

但不要让魔法误导你。 此命令仅使用您的配置覆盖全局变量process.env 。

您还可以做的是读取.env文件并使用任何 shell 脚本将其中的所有内容导出到环境变量，如下所示：

source_it() {
  while read -r line; do
    if [[ -n "$line" ]] && [[ $line != \#* ]]; then
      export "$line"
    fi
  done < $1
}
source_it .env

然后像以前一样运行你的过程：

node ./node_modules/.bin/cross-env NODE_ENV=development webpack-dev-server --open --hot

聚苯乙烯

另一件事是，如果您试图从浏览器中查看console.log ，它也与运行 webpack-dev-server 的节点进程无关。 为了使您的process.env变量对您的浏览器是全局的，您可以使用类似DefinePlugin 的东西

Answer 2

感谢@deathangel908，我想出了这个解决方案：

webpack.config.js

module.exports.plugins = (module.exports.plugins || []).concat([
  new webpack.EnvironmentPlugin({
    STRAPI_HOST: 'foobar'
  })
])

使用 webpack Environmentplugin 的缺点是你不能使用 .env 环境文件，比如 .env.development。 Webpack 有一个插件，但在我的项目中它不断抛出一个我无法解决的错误