Vue3中能否通过环境变量动态导入JS文件？已尝试两种方法遇问题

先明确你两种方法的问题：

• 第一种静态import的路径必须是静态字符串，ES模块规范不允许动态拼接路径，所以直接执行失败。
• 第二种写法把动态import()包装成了函数，但动态import()本身返回的是Promise，你没处理这个Promise的结果，而且可能没正确提取模块的导出内容，才会出现结果不符合预期的情况。

正确的动态导入方式 #

方式1：使用async/await（需在async函数内执行）

async function getAppConfig() {
  // 用模板字符串拼接路径，确保环境变量对应正确的文件名
  const module = await import(`@/constants/app.${process.env.NODE_ENV}.js`);
  // 根据你的文件导出方式获取内容：
  // 如果是默认导出（export default app），取module.default
  // 如果是命名导出（export const app = {...}），取module.app
  const app = module.default || module.app;
  return app;
}

// 调用获取配置
const appConfig = await getAppConfig();

方式2：使用Promise的.then()处理

import(`@/constants/app.${process.env.NODE_ENV}.js`)
  .then(module => {
    const app = module.default || module.app;
    // 在这里使用你的app配置
    console.log(app);
  })
  .catch(err => {
    console.error('配置文件加载失败:', err);
  });

排查「得到app1」的问题 #

1. 检查process.env.NODE_ENV的实际值，确认它和你预期的文件名后缀匹配（比如预期是app.js的话，是不是环境变量值为空或者错误导致路径拼接成了app.1.js？）
2. 确认目标JS文件的导出方式：如果文件里是export default app，必须取module.default；如果是命名导出，要对应取正确的导出名称。

可选：构建阶段静态替换（推荐） #

如果你的项目用webpack/vite这类构建工具，可以在构建时直接替换环境变量，让路径变成静态可分析的，这样就能用静态import：

• webpack：用DefinePlugin注入环境变量，然后直接写：

import app from `@/constants/app.${process.env.NODE_ENV}.js`;

• vite：通过.env文件设置环境变量，同样用模板字符串的静态import即可，vite会在构建阶段替换变量。

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