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

前端项目打包后，后端或维护人员可直接在dist中修改配置内容，一键更新项目，不需要重新编译，推荐用于请求地址、外链资源、主题风格、前后端数据对照等需要动态调整的场景

一、封装配置文件

在public下新建文件config.js，自定义配置数据（约定键名大写，仅可修改数据值）：

javascript 复制代码

/* 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,
  },
}

在index.html中优先引入配置文件：

html 复制代码

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 优先引入配置文件 -->
    <script src="<%= BASE_URL %>config.js"></script>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在main.js中挂载配置到全局：

javascript 复制代码

/* src/main.js */

// 确保 config.js 加载成功
if (typeof window !== "undefined" && window.customConfig) {
  // 定义为全局属性后可在组件中使用 this.$config 获取
  app.config.globalProperties.$config = window.customConfig
} else {
  console.warn("window.customConfig is not defined!")
}

二、获取配置内容

组件中获取（示例）：

javascript 复制代码

/* example.vue */

if (this.$config) {
  window.open(this.$config.VUE_APP_BASE_API + this.$config.VUE_APP_API_ENDPOINT)
}

其他配置文件中获取（示例）：

javascript 复制代码

/* src/api/index.js */

// 确保 config.js 加载成功
const config = () => {
  if (typeof window !== "undefined" && window.customConfig) {
    return window.customConfig
  }
}
// 应用自定义配置
const axios = require("axios").default
const instance = axios.create({
  baseURL: config ? config.VUE_APP_BASE_API + config.VUE_APP_API_ENDPOINT : "https://example-api.com/endpoint",
  timeout: config ? config.VUE_APP_API_TIMEOUT : 15000,
})