如何使用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

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

Answer 3

我不知道这是否与你有同样的问题，但这种情况在我的情况下发生：

• 我设置的一切都正确（不是任何.config.js文件）
• 然后我停下来并使用npm run serve启动了dev-server
• 当我现在刷新页面时，控制台中没有任何变化

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