使用ViteJs执行vite build时无法解析图片资源的问题求助

以下是几个可行的解决方向：

• 核对文件相对路径
  确认Demo.ts的位置和./assets/Image.png的实际路径是否匹配。比如如果Demo.ts在src/js/components/目录下，而图片文件在src/js/assets/，那么导入路径应该改为../assets/Image.png，确保路径指向真实存在的文件。

• 统一配置文件名与命令参数
  你执行构建时用的是--config ./vite.config.ts，但提供的配置文件是vite.config.js，这会导致Vite加载不到你添加了assetsInclude的配置文件。要么将配置文件重命名为vite.config.ts，要么修改命令为vite build --watch --config ./vite.config.js。

• 调整assetsInclude配置写法
  尝试将assetsInclude改为正则表达式写法，可能会解决匹配问题：

  assetsInclude: /\.png$/
  

  同时可以在配置文件顶部添加console.log('Vite config loaded')，执行构建命令时查看控制台是否输出该内容，确认配置文件被正确加载。

• 补充Rollup资源处理配置
  由于你设置了输出格式为CJS，可在rollupOptions中明确配置资源处理规则：

  rollupOptions: {
    input: {
      index: './src/js/pages/Index.ts'
    },
    output: {
      format: 'cjs',
      entryFileNames: '[name].js',
      dir: './public/dist'
    },
    assets: {
      include: ['**/*.png'],
      outputDir: 'assets' // 指定资源输出目录，可根据需求调整
    }
  }
  

• 强制清除Vite缓存
  执行带--force参数的构建命令，清除旧缓存后重新构建：

  vite build --watch --config ./vite.config.ts --force
  

内容的提问来源于stack exchange，提问作者Trung Hiếu Đặng