Question

我在Docker容器中运行vue.js应用程序。我通过环境变量设置了一些配置（例如API base url）。我希望能够在我的浏览器应用程序中使用这些变量。我怎么能通过它们？

我尝试将这些变量添加到其中一个config / * .env.js文件中（config / dev.env.js）：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  backendBase: process.env.BACKEND_BASE
})

然后我使用npm run dev运行应用程序，但process.env对象始终为空（NODE_ENV也不可用）

Answer 1

我最近遇到了同样的问题。如果您使用观察程序运行开发服务器，我认为它没有正确选择配置更改。我停止了我的开发服务器，重建了生产（不知道这是否有帮助，但以防万一）然后再次启动开发服务器，一切都很好。

要访问上述设置，您应该可以在代码中使用process.env

console.log(process.env.NODE_ENV)

Answer 2

我认为Vue仅打包了前缀为VUE_APP的变量。

发件人：https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

请注意，只有以VUE_APP_开头的变量将是静态的嵌入webpack.DefinePlugin的客户端捆绑中。

我在本地测试。

.env的根目录：

APP_TEST=foo
VUE_APP_TEST=bar

在main.js中：

// imports and other stuff

new Vue({
  render: h => h(App),
}).$mount('#app');

console.log(process.env.APP_TEST, 'APP_TEST');
console.log(process.env.VUE_APP_TEST, 'VUE_APP_TEST');

输出：

undefined APP_TEST 
bar VUE_APP_TEST

如果对envvar进行更改，则需要运行另一个构建。

Vue.js：将环境变量传递给vue.js应用程序

2 个答案: