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

Question

所以我对 Vue-Cli 是个全新的人，我正在学习一个使用 Vue 前端和 Rails 后端的教程。 我正在配置 Axios 来处理我的请求。

我的问题：

我试图在我的 API_URL 常量上设置 ENV_VAR，此时当我尝试 console.log API_URL 时，我收到以下错误：

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

我有以下配置/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 import axios from '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 object。 但是，这些变量仅在构建时可用（因为process.env是节点环境的全局属性）。

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

在此处阅读有关它的更多信息

Answer 2

所以我可以通过在我的App.vue文件中添加以下内容来记录 VUE_APP_ENV_API_URL 的 output：

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