Question

因此，我是Vue-Cli的新手，并且正在关注有关将Vue前端与Rails后端一起使用的教程。我将Axios配置为处理我的请求。

我的问题：

我正在尝试在我的API_URL常量上设置ENV_VAR，此时，当我尝试进行console.log API_URL时，出现以下错误：

Uncaught ReferenceError: process is not defined
at <anonymous>:1:13

我对 config / dev.env.js

具有以下要求

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_API_URL: '"http://localhost:3000/api/fuzeisp/v1"'
})

，我正在尝试在 src / backend / axios / index.js 中调用该ENV 从“ axios”导入axios

const API_URL = process.env.ENV_API_URL

const securedAxiosInstance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application.json'
  }
})

我已经尝试阅读文档，但是由于某种原因，我无法对此做出正面或反面的解释！在这里的任何帮助将不胜感激！请，如果您需要更多信息，我很乐意为您提供！

谢谢。

Answer 1

vue cli使用dotenv来解析.env文件及其内容，并将其内容添加到process.env对象中。但是，这些变量仅在构建时可用（因为process.env是节点环境的全局属性）。

客户端上的

代码完全无法访问process对象。但是，vue cli可以帮助您！它在构建时读取process.env变量，并将其替换为其相应的值-因此您可以在客户端代码中使用它们。 注意：：它仅替换以VUE_APP_开头的那些变量；例如VUE_APP_BASE_URL=www.myapp.com。

详细了解here

Answer 2

因此我可以通过在App.vue文件中添加以下内容来记录VUE_APP_ENV_API_URL的输出：

<script>
export default {
  name: 'App',
  mounted () {
    console.log(process.env.VUE_APP_ENV_API_URL)
  }
}
</script>

在vue-cli中正确使用ENV变量

2 个答案: