由于路径在dev和build（prod）之间的作用不同，事情变得混乱。我创建了a very simple example sandbox来帮助使用Vite starter应用程序的可视化内容。我也推荐阅读Static Asset Handling。Vite Build Options也非常有用，它允许您更改文件的输出位置。
理想情况下，您希望在组件的顶部使用import reactSVG from './assets/react.svg'，然后使用src={reactSVG)在呈现中引用该src，开发和构建都会对此感到满意。
或者您应该使用绝对路径，如/assets/react.svg，删除前面的.。
除了上面的沙盒，我还在每个图像的内联上写了详细的注解来帮助理解。

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          {/**
           * In dev, /vite.svg defaults to the "/public/vite.svg"
           * In build/prod, /vite.svg defaults to "/dist/vite.svg"
           * Use absolute paths or imports (below) when possible.
           */}
          <img
            src="/vite.svg"
            className="logo"
            alt="Vite logo"
            width="25"
            height="25"
          />
        </a>
        <a href="https://reactjs.org" target="_blank">
          {/**
           * Due to import magic, this works in both dev / build (prod)
           * Use imports or absolute paths when possible.
           */}
          <img
            src={reactLogo}
            className="logo react"
            alt="React logo"
            width="25"
            height="25"
          />
        </a>
        {/**
         * Here is where things go wrong with the default configuration:
         *
         * Example --- src="./assets/react.svg" won't work by default. Why?
         * In development, "./" equates to your project root, "/"
         *
         * In a basic Vite project, root contains "src", "public", and "dist", if you ran the `npm run build` command.
         * As you can see, there is no "assets" folder in project root. It's only contained
         * within "src" or the "dist" folder. This is where things get interesting:
         *
         * When you "build" your app, Vite appends unique strings at the end of your compiled .js
         * files in order to avoid cache side-effects on new deployments in the front-end.
         *
         * So in the built app folder ("dist"), your assets will look something like this:
         *
         * /dist/assets/react-35ef61ed.svg
         * /dist/assets/index-d526a0c5.css
         * /dist/assets/index-07a082e1.js
         *
         * As you can see, there is no "/assets/react.svg". It does not exist in the build,
         * which is why it's recommended that you import images at the top of your component
         * for local assets. You can use remote assets as inline string paths. ("https://...")
         */}
        <a href="https://vitejs.dev" target="_blank">
          <img
            src="./assets/react.svg"
            className="logo"
            alt="Never be visible"
            width="25"
            height="25"
            style={{ border: "1px red solid" }}
          />
        </a>
        {/* only works in dev, non-build */}
        <a href="https://vitejs.dev" target="_blank">
          <img
            src="/src/assets/react.svg"
            className="logo"
            alt="Visible in dev"
            width="25"
            height="25"
            style={{ border: "1px solid green" }}
          />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  );
}

export default App;