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

Question

我尝试在vue-cli中使用环境变量，但是不起作用，每次使用console.log(process.env.VUE_APP_BASE_URI)时都说“ undefined”。但是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/

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

Answer 1

它只是发生在我身上，解决方案非常简单。只需重新启动开发服务器即可。

ctrl + c

然后

npm run serve

Answer 2

可能有不同的方法可以实现此目的，从命令行中获得一种简单的方法是：

npx vue-cli-service serve --mode production

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

Answer 3

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

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

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

Answer 4

您只需要将文件重命名为.env，而不是.env.production或.env.development。如果没有，它应该可以在同一线程上进行注释。

Answer 5

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

This