使用Vite构建Vue3项目时出现两类报错的技术求助

错误1：Rollup无法解析图片模块 #

• 检查profile.vue中图片的导入路径，确保使用正确的相对路径（如../assets/img/users/patient.png）；若使用别名（如@/assets/...），确认vite.config.js已配置别名映射：

  import { defineConfig } from 'vite'
  import path from 'path'
  
  export default defineConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  })
  

• 若路径无误，在vite.config.js中添加assetsInclude配置，确保png格式被识别为项目资源：

  export default defineConfig({
    assetsInclude: ['**/*.png']
  })
  

• 注意：不要将图片添加至build.rollupOptions.external，该配置用于排除外部依赖，图片属于项目资源需被打包处理。

错误2：rollup-plugin-dynamic-import-variables 意外令牌错误 #

• 打开D:/PFE/Fontend/HealthAppFront-main/src/assets/js/ipfs.js第10行，检查动态导入语法：
  • 确保动态导入使用模板字符串时带有固定基础路径，Rollup需要静态分析出路径范围，比如不能直接使用import(variablePath)，需写成import(./fixed-dir/${variableName})
  • 排查是否存在语法错误，比如括号不匹配、变量未定义，或使用了Rollup不支持的复杂动态表达式
• 若为IPFS资源加载场景，可改为静态导入或使用glob批量导入，示例修正：

  // 错误示例
  import(ipfsResourcePath)
  
  // 修正后（固定基础路径）
  import(`./ipfs-resources/${ipfsResourcePath}`)
  

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