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

Question

我尝试在 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.生产

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

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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