Vue.js 如何使用vue cli 3配置环境变量？

我尝试在vue cli中使用环境变量，但不起作用，每次使用

console.log（process.env.vue\u APP\u BASE\u URI）

时都会说“未定义”。但是

process.env.NODE\u 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一起使用。如何使用环境？

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

npx vue-cli-service serve --mode production

---

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

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

• 我像您一样正确设置了所有内容（不是任何.config.js文件）
• 然后，我停止并启动带有npm run serve的开发服务器
• 当我现在刷新页面时，控制台中没有任何更改

---

然后我看到npm run serve命令在另一个端口上启动了站点。旧版本仍在运行，但提供了旧值。当我尝试使用新端口时，其值是正确的。

我碰巧遇到了这种情况，解决方案非常简单。只需重新启动开发服务器

ctrl + c

然后

---

您只需将文件重命名为

.env

，而不是

.env.production

或

.env.development

。如果没有，应该在同一个线程上进行注释。

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

---

你做的每件事都是对的！我刚在我的电脑上试过。你只需要重新启动你的开发服务器！Vue cli 3不使用

webpack.config.js

它使用

Vue.config.js

-重要区别。您可以在

package.json

中的

脚本中设置
--模式开发
和
--模式生产
，以便加载正确的环境。您还可以通过在终端中运行
vue inspect
或
vue inspect>webpack.config.js
来检查
webpack.config.js
，以添加文件项目目录。无论出于何种原因，在docker容器中，我无法通过
npm run serve--mode=production
（我假设这是某个地方的版本控制问题）使.env文件正常工作，但最终使.env文件正常工作。
npm run serve