vue3在public下封装config.js自定义配置动态数据，可在打包后直接修改，方便后端部署及后续维护

前端项目打包后后端或维护人员可直接在dist中修改配置内容一键更新项目不需要重新编译推荐用于请求地址、外链资源、主题风格、前后端数据对照等需要动态调整的场景一、封装配置文件在public文件夹下新建文件config.js自定义配置数据约定键名大写仅可修改数据值/* public/config.js */window.customConfig{// API 基础 URL请求端点VUE_APP_BASE_API:https://your-production-api.com,// API 请求端点VUE_APP_API_ENDPOINT:/endpoint,// API 请求超时毫秒VUE_APP_API_TIMEOUT:10000,// 添加更多项目……ERR_CODES:{NOT_FOUND:404,},}在main.js中载入配置文件并挂载到全局/* main.js */// 确保 config.js 加载成功if(typeofwindow!undefinedwindow.customConfig){// 定义为全局属性后可在组件中使用 this.$config 获取app.config.globalProperties.$configwindow.customConfig}else{console.warn(window.customConfig is not defined!)}二、获取配置内容组件中获取示例/* example.vue */if(this.$config){window.open(this.$config.VUE_APP_BASE_APIthis.$config.VUE_APP_API_ENDPOINT)}其他配置文件中获取示例/* src/api/index.js */// 确保 config.js 加载成功constconfig(){if(typeofwindow!undefinedwindow.customConfig){returnwindow.customConfig}}// 应用自定义配置constaxiosrequire(axios).defaultconstinstanceaxios.create({baseURL:config?config.VUE_APP_BASE_APIconfig.VUE_APP_API_ENDPOINT:https://example-api.com/endpoint,timeout:config?config.VUE_APP_API_TIMEOUT:15000,})