PureScript与Vite集成遇图片导入报错，求解决方案

架构老林

2026-6-27

解决方案：Vite + PureScript FFI 导入图片路径问题

问题根源

Spago编译后，src/Constants.js会被复制到output/Constants/foreign.js位置。原代码里的相对路径./typescript.svg是相对于src目录的，但编译后FFI文件的位置发生了变化，导致Vite无法找到对应的图片文件，从而抛出解析错误。

可行方案

方案1：调整FFI文件的相对路径适配编译后位置

直接修改Constants.js中的图片导入路径，使其相对于编译后的foreign.js位置：

// src/Constants.js
import typescriptlogo from '../../src/typescript.svg' // 从output/Constants目录向上两级到项目根，再指向src下的图片
import vitelogo from '/vite.svg'

export { typescriptlogo, vitelogo }

方案2：用Vite路径别名统一资源路径

在Vite配置文件（vite.config.ts或vite.config.js）中添加路径别名，将src目录映射为固定别名，避免路径受编译后文件位置影响：

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@src': '/src' // 把src目录映射为@src别名
    }
  }
})

随后修改Constants.js的导入语句：

// src/Constants.js
import typescriptlogo from '@src/typescript.svg'
import vitelogo from '/vite.svg'

export { typescriptlogo, vitelogo }

方案3：将图片移至public目录

如果图片不需要Vite的资源处理（如hash命名、压缩），可将typescript.svg移到public目录，直接通过根路径访问：

// src/Constants.js
import typescriptlogo from '/typescript.svg' // public目录下的文件可直接用根路径导入
import vitelogo from '/vite.svg'

export { typescriptlogo, vitelogo }