在 vue 中使用环境变量答案

【问题标题】：Using environment variables in vue在 vue 中使用环境变量
【发布时间】：2021-10-08 23:19:10
【问题描述】：

我看到了很多关于这个主题的其他问题，但没有一个对我有帮助。

使用 vue 我想使用一个 api，但是当应用程序投入生产时，url 会改变，所以在 .env 文件中我定义了一个 BASE_URL，但是当我在 vue 组件中使用它时，它说 procces 是未定义。

我已尝试在 webpack.config.js 中使用 webpack.DefinePlugin 或将环境变量命名为 VUE_APP_BASE_URL 但似乎没有任何效果。

export default {
  name: "Dashboard",
  data() {
    return {
      data: undefined
    }
  },
  created() {
    axios
      .get(process.env.BASE_URL + "/api/xxxxx")
      .then(res => this.data = res.data)
  },
};

webpack.config.js：

    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            'process.env.BASE_URL': JSON.stringify(process.env.BASE_URL),
        })
    ]

.env: BASE_URL=http://localhost:3000/

webpack 版本：5.48.0

【问题讨论】：

你是如何使用definePlugin的？你使用的是什么 webpack 版本？你的 .env 结构是什么？
我更新了@Jtcruthers 的问题

标签： javascript node.js vue.js axios environment-variables

【解决方案1】：

您可以从

获取网站的窗口 base-url

window.location.origin

~~我认为环境变量只在进程中起作用，编译后会丢失。~~

【讨论】：

环境变量在编译时被硬编码到一个包中。 window.location.origin 可以使用，但并不总是与 BASE_URL 相同
不完全是我要求的，但它解决了我的问题，谢谢。

【解决方案2】：

webpack 的乐趣。以this answer 为参考，将您的 webpack 插件部分更改为

  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]

并安装process 模块

yarn add -D process

看起来应该为您将整个流程对象传递给应用程序。如果这不起作用，the answer below 那一个显示另一种方式，但它需要安装 dotenv。

另外一点有用的信息，如果您使用的是 Vue3，则需要在任何地方为变量添加前缀。你会在.env 文件中使用VUE_APP_BASE_URL="***"，当你在其他任何地方使用它时使用process.env.VUE_APP_BASE_URL

【讨论】：

【解决方案3】：

您可以在单独的 .js 文件中使用您的环境变量，例如 axios 实例，例如：

import axios from 'axios'

const httpClient = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 10000, // indicates, 10000ms ie. 10 second
  body: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

export default httpClient

然后像这样在你的 Vue 文件中使用它

import httpClient from '../httpClient'

export default {
  name: "Dashboard",
  data() {
    return {
      data: undefined
    }
  },
  async created() {
    const axiosResponse = await httpClient.get('/api/xxxx')
    this.data = axiosResponse.data.yourData
  }
};

编辑：您需要以“VUE_APP_”开始您的环境变量

【讨论】：

我仍然遇到同样的错误：process is not defined.

【解决方案4】：

如果您使用 vue-cli-service 来运行您的应用程序，如您所说，您可以使用 VUE_APP_BASE_URL 作为环境变量名称：

VUE_APP_BASE_URL=http://localhost:3000/

那么你可以这样使用它：

export default {
  name: "Dashboard",
  data() {
    return {
      data: undefined
    }
  },
  created() {
    axios
      .get(process.env.VUE_APP_BASE_URL + "/api/xxxxx")
      .then(res => this.data = res.data)
  },
};

它应该可以工作。

【讨论】：