如何在Vite中避免settings.json被打包，实现生产环境可修改？

步骤1：将配置文件移至public目录 #

把你的settings.json文件移动到项目根目录的public文件夹下（如果没有public文件夹就新建一个）。Vite会将public目录下的文件原封不动地复制到构建后的dist目录中，不会对其进行压缩或打包，这样生产环境中直接修改dist/settings.json就能生效，无需重新构建。

步骤2：修改代码处理异步加载配置 #

由于不能使用顶层await，我们可以在应用初始化阶段先加载配置，确保后续代码使用配置时已经加载完成，具体实现如下：

1. 创建配置加载模块（比如src/config.js）

let loginSettings = null;

// 加载并解析配置文件
export async function loadSettings() {
  try {
    const res = await fetch('/settings.json');
    const b2cSettings = await res.json();
    // 生成最终的登录配置
    loginSettings = {
      names: {
        signUpSignIn: b2cSettings.signUpSignInPolicyName
      },
      authorities: {
        signUpSignIn: {
          authority: b2cSettings.signUpSignInAuthority
        }
      },
      authorityDomain: b2cSettings.authorityDomain
    };
  } catch (err) {
    console.error('配置文件加载失败:', err);
    // 设置默认配置作为降级方案
    loginSettings = {
      names: { signUpSignIn: '默认注册登录策略名' },
      authorities: { signUpSignIn: { authority: '默认授权地址' } },
      authorityDomain: '默认授权域名'
    };
  }
}

// 获取已加载的配置
export function getLoginSettings() {
  if (!loginSettings) {
    throw new Error('请先调用loadSettings()加载配置');
  }
  return loginSettings;
}

2. 在应用入口文件中初始化配置

以Vue项目为例（React项目逻辑类似），在main.js中先加载配置再挂载应用：

import { createApp } from 'vue';
import App from './App.vue';
import { loadSettings } from './config.js';

// 先加载配置，再启动应用
async function initApp() {
  await loadSettings();
  createApp(App).mount('#app');
}

initApp();

3. 在业务代码中使用配置

后续需要用到loginSettings的地方，直接调用getLoginSettings()获取即可：

import { getLoginSettings } from './config.js';

// 示例：在组件中使用
const loginConfig = getLoginSettings();
console.log(loginConfig.names.signUpSignIn);

方案说明 #

• 配置文件放在public目录后，生产环境修改dist/settings.json，用户刷新页面就会获取到最新配置，无需重新构建。
• 通过应用启动前的异步加载，既避开了顶层await的兼容性问题，又保证了配置在业务代码执行前已准备完成。
• 增加了错误捕获和默认配置，避免因配置文件加载失败导致应用崩溃。

内容的提问来源于stack exchange，提问作者Brunol55