Vite 中的各种模版已经集成了 dotenv，使得我们可以直接通过 .env 文件为不同的环境配置所需的环境变量。

通常，这已经能够很好的满足需求了，但有些时候，尤其是在开发（生产）环境严重受限的情况下，我们无法事先知道最终能够使用的一些配置，如接口地址等。

而打包后的文件又是经过压缩的，难以阅读，我们不可能到代码中去手动修改配置（就算手动修改，也有可能出现修改不全的情况），那如何解决呢？

本文提供一个使用 provide 和 inject 来解决这个问题的思路。

原理

在项目中，我们肯定会需要从接口获取数据，因此我们一定安装了相应的请求工具（如 Axios），如果我们将配置文件像获取数据的方式一样从“别处”获取，然后在运行时中使用，就可以不受预设限制了。

实现过程

通过Vite 创建一个新工程，在 public 文件夹下新建一个 config.json 文件，写入所需的配置，如：

{
    "api": "//example.com",
    "attachment": "//attachment.com"
}

然后在 main.js 中使用请求工具去获取上述配置文件，获取成功后再进行初始化，并使用 provide 将配置注入：

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import myAxios from "./assets/js/myAxios";
import axios from "axios";

axios.get("/config.json").then(({config}) => {

  myAxios.defaults.baseURL = config.api;

  const app = createApp(App);

  app.provide("config", config);

  app.use(router).mount('#app')
})

这样一来，在所有组件中都可以通过 inject 取到所有配置：

<template>
  <div>{{config.attachment}}</div>
</template>

<script setup>
  import {inject} from "vue";

  const config = inject("config");
</script>

<style lang="scss" scoped>

</style>

从而实现不受开发（生产）环境限制。

结语

此方法还有一个好处就是即使线上正在运行，也可以直接修改 config.json 中的配置，实现实时更新。