如何在try/catch中使用import？解决环境文件缺失致构建失败问题

问题根源在于你用的动态import("@/environments")会被Webpack、Vite这类构建工具在打包阶段提前解析路径，一旦文件不存在，构建工具会直接抛出错误——这个错误发生在代码运行前，所以运行时的try/catch根本捕获不到。

以下是几种可行的解决方法：

1. 提供默认 fallback 文件 #

直接在项目指定目录下创建一个默认的environments.js文件，内容为：

export default {};

这样即使用户没有自定义环境文件，构建工具也能找到这个文件，不会触发构建失败。后续你可以在代码里判断配置是否为空，再给出提示或使用默认值。

2. 动态拼接导入路径，避开构建阶段解析 #

把导入路径改成动态拼接的形式，让构建工具无法在打包阶段确定具体路径，从而跳过强制解析：

let environments = {};
try {
  // 用相对路径动态拼接，避免构建工具提前检查文件存在性
  const envModule = await import(`./environments.js`);
  environments = envModule.default || envModule;
} catch (error) {
  console.warn("未找到环境配置文件，将使用默认配置");
}

注意：部分构建工具可能需要额外配置允许动态路径导入，比如Webpack需确保output.publicPath配置正确，Vite无需特殊配置即可支持。

3. 通过环境变量控制导入逻辑 #

在构建工具配置中，先判断环境文件是否存在，再注入对应的环境变量，代码里根据变量决定是否导入：

步骤1：在构建配置中注入环境变量 #

以Vite为例，修改vite.config.js：

import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';

// 检查环境文件是否存在
const envFileExists = fs.existsSync(path.resolve(__dirname, './src/environments.js'));

export default defineConfig({
  define: {
    'process.env.ENV_FILE_EXISTS': JSON.stringify(envFileExists)
  }
});

步骤2：代码中根据变量判断导入 #

let environments = {};
if (process.env.ENV_FILE_EXISTS === 'true') {
  try {
    environments = await import("@/environments");
  } catch (error) {
    console.warn("环境配置文件加载失败，使用默认配置");
  }
}

4. 利用构建工具的别名 fallback #

在Webpack或Vite的别名配置中，设置当目标文件不存在时，指向默认的空配置文件：

Webpack 示例（webpack.config.js） #

const path = require('path');
const fs = require('fs');

const customEnvPath = path.resolve(__dirname, './src/environments.js');
const defaultEnvPath = path.resolve(__dirname, './src/default-environments.js');

module.exports = {
  resolve: {
    alias: {
      '@/environments': fs.existsSync(customEnvPath) ? customEnvPath : defaultEnvPath
    }
  }
};

Vite 示例（vite.config.js） #

import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';

const customEnvPath = path.resolve(__dirname, './src/environments.js');
const defaultEnvPath = path.resolve(__dirname, './src/default-environments.js');

export default defineConfig({
  resolve: {
    alias: {
      '@/environments': fs.existsSync(customEnvPath) ? customEnvPath : defaultEnvPath
    }
  }
});

同时创建default-environments.js，内容为export default {};。

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