如何使用 vue-cli 3 配置环境变量？

Posted 2023-02-22

【中文标题】如何使用 vue-cli 3 配置环境变量？

【英文标题】：How to configure environment variables with vue-cli 3?

【发布时间】：2019-04-10 05:37:00

【问题描述】：

我尝试在 vue-cli 中使用环境变量，但不起作用，每次使用 console.log(process.env.VUE_APP_BASE_URI) 时都会说“未定义”。但是process.env.NODE_ENV 说的是我在 webpack.config.js 中定义的“开发”。

我阅读了 vue-cli 3 的文档并将我的 .env.* 文件放在根项目中。像这样：

Webpack.config.js

    module.exports = 
  mode: 'development',
  context: __dirname,
  entry: 
    main: ['babel-polyfill', './App/index.js']
  ,
  plugins:[
    new VueLoaderPlugin()
  ],

.env.development

VUE_APP_BASE_URI=http://localhost:64208/api/

.env.production

VUE_APP_BASE_URI=http://localhost:64208/api/

我使用 .NET Core 和 Vue。如何使用环境？

【问题讨论】：

你做对了！我刚在我的电脑上试过。你只需要重启你的开发服务器！

Vue cli 3 不使用 webpack.config.js 它使用 vue.config.js - 重要区别。您可以在 scripts 中的 package.json 中设置 --mode development 和 --mode production，以便加载正确的环境。

【参考方案1】：

这只是发生在我身上，解决方案很简单。只需重新启动您的开发服务器。

ctrl + c

然后

npm run serve

【讨论】：

您也可以通过在终端中运行vue inspect 或vue inspect > webpack.config.js 在项目目录中添加文件来检查您的webpack.config.js。

【参考方案2】：

可能有不同的方法来实现这一点，命令行的一种简单方法是：

npx vue-cli-service serve --mode production

如果未指定 mode，则默认为 development。

【讨论】：

无论出于何种原因，在 docker 容器中，我无法通过 npm run serve --mode=production 获取 .env 文件（我假设这是某处的版本控制问题），但这最终解决了让 .env 文件正常工作。

【参考方案3】：

您只需要将文件重命名为 .env 而不是 .env.production 或 .env.development。它应该可以工作，如果没有，请在同一线程上发表评论。

【参考方案4】：

我不知道这是否与您遇到的问题相同，但在我的情况下发生了这种情况：

我设置的一切都和你一样正确（不是任何 .config.js 文件） 然后我停止并使用 npm run serve 启动开发服务器 当我现在刷新页面时，控制台中没有任何变化

然后我看到 npm run serve 命令在不同的端口上启动了站点！。旧版本仍在运行，但给出了旧值。当我尝试新端口时，值正确。

【参考方案5】：

就我而言（带有 Core 2.2 的 Vue CLI 3），我必须将 .env 文件放在 Core webapp 文件夹下。如果我将它们放在 wwwroot 或 Vue 应用程序文件夹中，它就不起作用。