vue项目打包发布后修改配置文件仍然生效的方案（以Vue3为例）

使用json，并且要用ajax来加载；应用过程中也有一些注意的问题。

有关"vue3项目发布后修改配置文件仍然生效"问题，之前做过一篇笔记《vue项目读取全局配置》。但事实上，那篇笔记的步骤，只解决了项目发布后，配置文件没有被压缩，仍然可见可编辑的问题；但配置文件编辑保存后，并没有生效，也就是说，改了也是白改，一点意义都没有。

那篇笔记中，配置文件是js文件，使用import的方式。结果项目发布后，估计打包程序做了处理，直接将里面的内容读出来，内联到每个使用它的组件中去了，所以后面再改配置文件不会起作用。

vue发布时，应该是可以指定参数，使用不同的配置文件发布。但这总比不上可以修改配置文件方便。你总不能，因为生产环境有所改变，又重新发布一个吧。一是不方便，二是有时做不到。所以还是要看看，如何做到发布以后，还能修改配置文件。

一种方法是改用json作为配置文件，然后在项目中使用ajax或者require的方式对它进行读取。具体如下：

1、创建配置文件

2、在主程序中读入配置文件

3、组件中使用配置

4、库类型文件使用require方式读入配置

1、创建配置文件

在项目的public目录下创建一个json文件作为配置文件，如命名为web-config.json。网上有文章说不要将配置文件命名为config.json，也没说明理由。因为时间有限，姑妄听之，我在前面加了个"web-"前缀。内容比如：

public/web-config.json

json 复制代码

{
  "app": {
    "name": "订餐拿饭抓阄系统",
    "owner": "大甲研究院",
    "developer": "乙丙丁有限公司"
  },
  
  "server": "http://10.0.1.8:8090",
  
  "power": {
    "minA": 0,
    "maxA": 5000,
    "defaultMinA": 1000,
    "defaultMaxA": 2500
  }
}

2、在主程序中读入配置文件

main.js

js 复制代码

import axios from "axios";

// 使用配置
loadConfig().then((config) => {
  const app = createApp(App);

  app
    .use(store)
    .use(router)
    .mount("#app");

  app.provide("globalConfig", config);
});

// 加载配置
async function loadConfig() {
  const response = await axios.get("/web-config.json");
  return response.data;
}

3、组件中使用配置

在main.js中，使用了provide的方式，共享了配置。

js 复制代码

app.provide("globalConfig", config);

所以在组件中，很自然就用inject的方式注入配置：

js 复制代码

import { inject } from "vue";

const appConfig = inject("globalConfig");

4、库类型文件使用require方式读入配置

3是在组件中，即*.vue文件中使用。如果是类似库文件这类的js，该如何使用这些配置？答案是需要直接require该配置文件。也就是说，无法享用共享的配置，需要自己再次读取。如：

vue.config.js

js 复制代码

const appConfig = require("./public/web-config.json");