如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值

Question

vue2项目中，在public文件夹下面新建了一个config.js的文件，定义如下代码

// config.js
window.APP_CONFIG = {
  API_BASE_URL: 'http://localhost:8070',
}

如何在vue.config.js中读取到window.APP_CONFIG.API_BASE_URL的值

Answer 1

AIGC生成：

---

解决方案

你可以在 vue.config.js 文件中使用 require 函数来读取 public 文件夹下的 config.js 文件，并获取 API_BASE_URL 的值。

以下是一个示例代码：

module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      {
        plugin: require('webpack.DefinePlugin'),
        options: {
          'process.env.API_BASE_URL': JSON.stringify(window.APP_CONFIG.API_BASE_URL)
        }
      }
    ]
  }
}

在上面的代码中，我们使用 webpack.DefinePlugin 插件来定义一个全局变量 API_BASE_URL，其值是从 window.APP_CONFIG.API_BASE_URL 中读取的。

然后，在你的 Vue 组件中，你可以使用 process.env.API_BASE_URL 来获取这个变量的值。

例如：

<template>
  <div>
    <p>API_BASE_URL: {{ API_BASE_URL }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      API_BASE_URL: process.env.API_BASE_URL
    }
  }
}
</script>

在上面的代码中，我们使用 process.env.API_BASE_URL 来获取 API_BASE_URL 的值，并将其赋值给组件的数据对象中。

---