Vue+Vite项目：如何让外部配置文件在开发环境正常导入？

针对Vite项目中外部配置文件在开发环境无法正常导入的问题，这里提供两种实用的解决思路：

方法一：动态区分环境加载配置 #

利用Vite的import.meta.env.DEV变量判断当前环境，开发环境通过fetch加载配置文件并解析，生产环境保持原有导入逻辑：

1. 保持public/config/settings.js的模块导出格式不变：

export const apiUrl = 'https://prod-api.example.com';
export const imageBaseUrl = 'https://prod-cdn.example.com';

2. 修改main.js的导入逻辑：

async function loadConfig() {
  let config;
  if (import.meta.env.DEV) {
    // 开发环境：fetch加载配置文件并解析导出内容
    const res = await fetch('/config/settings.js');
    const code = await res.text();
    // 通过临时模块解析导出变量
    const module = {};
    // 替换export const语法为模块赋值（仅适用于简单导出场景）
    eval(code.replace(/export const (\w+) = (.+);/g, 'module.$1 = $2;'));
    config = module;
  } else {
    // 生产环境：保持原有模块导入
    config = await import('/config/settings.js');
  }
  return config;
}

// 加载配置后挂载到全局
loadConfig().then(config => {
  app.config.globalProperties.apiUrl = config.apiUrl;
  app.config.globalProperties.imageBaseUrl = config.imageBaseUrl;
});

注意：eval仅适用于本地开发环境的可信配置，避免在生产环境使用。

方法二：改为全局变量加载 #

将配置文件改为挂载全局变量的形式，结合环境条件在HTML中引入，避免模块导入的限制：

1. 修改public/config/settings.js为全局变量导出：

window.appConfig = {
  apiUrl: 'https://dev-api.example.com',
  imageBaseUrl: 'https://dev-cdn.example.com'
};

2. 在index.html中根据环境引入配置脚本：

<!-- 仅在开发环境加载配置脚本 -->
<% if (import.meta.env.DEV) { %>
<script src="/config/settings.js"></script>
<% } %>
<script type="module" src="/main.js"></script>

3. 修改main.js的配置获取逻辑：

let config;
if (import.meta.env.DEV) {
  // 开发环境直接取全局变量
  config = window.appConfig;
} else {
  // 生产环境保持原有模块导入
  config = await import('/config/settings.js');
}

app.config.globalProperties.apiUrl = config.apiUrl;
app.config.globalProperties.imageBaseUrl = config.imageBaseUrl;

原理说明 #

Vite对public目录的处理逻辑是：开发环境下该目录的文件被视为静态资源，不会被编译为ES模块，因此无法直接通过import导入；而生产环境中，由于你配置了external，浏览器会直接请求该文件并作为ES模块解析，所以可以正常工作。上述两种方法都是通过环境区分，绕过Vite开发环境对public目录的模块导入限制，同时保留生产环境的原有逻辑。

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