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

Question

我尝试在vue-cli中使用环境变量，但不起作用，每次使用console.log(process.env.VUE_APP_BASE_URI)时都会显示“未定义”。但是process.env.NODE_ENV会显示“development”，就像我在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，如何使用该环境？

- Isaías Orozco Toledo

---

你做得很好！我刚在我的电脑上试了一下。你只需要重新启动你的开发服务器就可以了！ - Roland

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

Answer 1

刚刚发生了这种情况，解决方法非常简单。只需重新启动您的开发服务器即可。

ctrl + c

那么

npm run serve

- Bagaskara

---

您还可以通过在终端中运行 vue inspect 或者 vue inspect > webpack.config.js 将文件添加到项目目录中，来检查您的 webpack.config.js。 - Ravi Anand

Answer 2

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

最初的回答：

npx vue-cli-service serve --mode production

如果未指定模式，则默认为开发模式。

注：Original Answer翻译成“最初的回答”。

- Chuan

---

由于某种原因，在Docker容器内，我无法通过npm run serve --mode=production让.env文件正常工作（我猜测这可能是版本问题），但最终我解决了这个问题。 - Wiggy A.

Answer 3

你需要将文件名重命名为.env，而不是.env.production或.env.development。如果还不行，请在同一讨论串中留言。

- Ajay Kumar

Answer 4

在我的情况下（Vue CLI 3与Core 2.2），我必须将.env文件放在Core webapp文件夹下。如果我把它们放在wwwroot或Vue应用程序文件夹中，它就无法工作。

- Viet

Answer 5

我不知道这是否是你遇到的同样问题，但在我的情况下发生了以下情况：

• 我像你一样正确地设置了所有内容（没有任何.config.js文件）
• 然后我使用npm run serve停止并启动了开发服务器
• 当我现在刷新页面时，控制台中什么也没有改变

然后我发现npm run serve命令已经在不同的端口上启动了该网站！旧版本仍在运行，但提供旧值。当我尝试新端口时，值就正确了。

- andreasnico