Vite+Vue通过npm link引用的包无法解析vite.resolve.alias

以下是几种可行的解决方案，按推荐优先级排序：

方案1：包打包时解析别名（推荐生产环境使用） #

包项目最终要提供给其他开发者使用，应该在打包阶段将路径别名转换为实际相对路径，避免依赖别名配置。

步骤： #

1. 修改包项目（foo）的vite.config.js，配置打包选项确保别名被解析：

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

export default defineConfig({
  resolve: {
    preserveSymlinks: false,
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'foo',
      fileName: (format) => `foo.${format}.js`,
    },
    rollupOptions: {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, 'src'),
        },
      },
    },
  },
})

2. 在包的package.json中指定打包产物作为入口：

{
  "main": "dist/foo.umd.js",
  "module": "dist/foo.es.js",
  "types": "dist/index.d.ts" // 如有TS类型文件可添加
}

3. 执行npm run build生成打包文件，之后引用项目通过npm link或安装包时，会加载已解析好路径的产物，不再存在别名冲突。

方案2：为包单独配置别名规则（开发阶段临时解决） #

在引用项目的vite.config.js中，针对foo包的文件单独处理@别名，让其指向包自身的src目录：

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

// 获取本地foo包的实际路径（根据你的npm link路径调整）
const fooSrcPath = path.resolve(__dirname, '../../npmPackages/foo/src')

export default defineConfig({
  resolve: {
    preserveSymlinks: true, // 启用符号链接的独立解析
    alias: [
      // 优先处理foo包内部的@别名
      {
        find: '@',
        replacement: fooSrcPath,
        customResolver: (source, importer) => {
          // 判断当前导入是否来自foo包
          if (importer?.includes('npmPackages/foo')) {
            return source.replace('@', fooSrcPath)
          }
          // 其他场景使用项目自身的@别名
          return source.replace('@', path.resolve(__dirname, 'src'))
        },
      },
      // 项目自身的@别名
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
})

方案3：使用独特别名避免冲突（最简单的开发方案） #

修改包项目的别名，使用项目独有的前缀（如@foo）代替通用的@，彻底避免和其他项目的别名冲突：

1. 修改包项目的vite.config.js：

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

export default defineConfig({
  resolve: {
    preserveSymlinks: false,
    alias: {
      '@foo': path.resolve(__dirname, 'src'),
    },
  },
})

2. 修改包内的导入语句：

// src/index.js
import {merge} from '@foo/helpers/commonHelper.js'
export {merge}

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