问题根源 #

Web端运行时直接读取原项目目录下的images/logo.png，路径有效；但vite build默认不会将images目录复制到/dist构建产物中，而npx cap sync使用的是/dist目录，导致移动端找不到图片资源，触发404错误。

解决方案 #

方案1：利用Vite的public目录（推荐） #

Vite会自动将public目录下的文件原封不动复制到构建产物的根目录，无需额外配置：

1. 调整项目目录结构：

public/
  images/
    logo.png
index.html
js/index.js

2. 修改jQuery代码中的图片路径为绝对路径（基于构建后的根目录）：

$("<img/>", {
   src: "/images/logo.png"
}).appendTo("body");

方案2：配置Vite复制指定目录 #

如果不想调整目录结构，可通过rollup-plugin-copy插件将images目录复制到构建产物：

1. 安装插件：

npm install rollup-plugin-copy --save-dev

2. 在vite.config.js中添加配置：

import { defineConfig } from 'vite';
import copy from 'rollup-plugin-copy';

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        copy({
          targets: [
            { src: 'images/*', dest: 'dist/images' }
          ]
        })
      ]
    }
  }
});

3. 保持或修改图片路径为绝对路径/images/logo.png，确保跨平台路径一致。

关键注意点 #

• 尽量使用绝对路径指定资源位置，避免在不同路由场景下相对路径失效的问题。
• 每次修改配置或资源后，需重新执行npm run build和npx cap sync，确保移动端同步最新构建产物。

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