Vite别名在JavaScript函数中失效问题求助

问题根源 #

Vite的别名（如@img）仅在模块导入语法（import/require）中生效，而new URL()是浏览器/Node.js的原生API，不会识别并替换Vite别名，所以直接在new URL()的路径参数里写@img无法生效。

可行解决方案 #

方案1：用import.meta.resolve解析别名（推荐）

Vite提供了import.meta.resolve()方法，它能识别Vite配置中的别名并返回解析后的真实路径，结合new URL()使用即可：

// 注意：import.meta.resolve是异步方法，需配合async/await使用
const getSrc = async (ext) => {
  const resolvedPath = await import.meta.resolve(`@img/content/recipe/${props.recipe.image}${ext}`);
  return new URL(resolvedPath).href;
};

可以在异步上下文（比如组件的onMounted钩子）中调用这个函数，或者用IIFE包装同步执行。

方案2：注入全局路径变量

在Vite配置中定义全局变量，直接传入别名对应的真实路径，让new URL()能识别：

1. 修改vite.config.js：

import { defineConfig } from 'vite';
import { fileURLToPath, URL } from 'node:url';

export default defineConfig({
  define: {
    // 将@img对应的路径转为字符串注入全局
    __IMG_BASE__: JSON.stringify(fileURLToPath(new URL('./src/assets/images', import.meta.url))),
  },
  resolve: {
    alias: {
      '@img': fileURLToPath(new URL('./src/assets/images', import.meta.url)),
    },
  },
});

2. 调整路径构造函数：

const getSrc = (ext) => {
  return new URL(
    `${__IMG_BASE__}/content/recipe/${props.recipe.image}${ext}`,
    import.meta.url
  ).href;
};

方案3：抽离相对路径常量（回退方案）

如果不想修改异步逻辑或配置，可将基础相对路径抽成常量统一维护：

const IMG_BASE = '../../assets/images';
const getSrc = (ext) => {
  return new URL(
    `${IMG_BASE}/content/recipe/${props.recipe.image}${ext}`,
    import.meta.url
  ).href;
};

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