Vite打包后为什么静态资源路径404？

皇甫桂香提问于 2026-02-08 23:20:28 阅读 29

优化

用Vite开发的项目部署到服务器后，图片和字体文件都报404错误，明明在public目录里放了资源，也配置了publicDir: 'public'，生产构建后的dist里确实有这些文件，但页面访问时路径全是404…

尝试过在vite.config.js里这样配置：


export default defineConfig({
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[ext]'
      }
    }
  },
  publicDir: 'public'
})

页面里引用图片是这样写的：./public/logo.png，但生成的HTML里路径显示为/logo.png，服务器根目录确实有public/logo.png文件，为什么访问不到呢？

我来解答赞 6 收藏

反馈

2 条解答

百里雨鑫 Lv1

你这个问题其实挺常见的，主要是路径配置和引用方式有点小问题。咱们一步步来看怎么解决。

首先，你在页面里直接写 ./public/logo.png 这种引用方式其实是不对的。Vite 会把 public 目录里的文件原封不动地复制到输出目录（比如你的 dist 目录），但这些文件的访问路径是相对于服务器的根目录，而不是相对于你的项目目录。

正确的引用方式应该是直接用绝对路径，比如 /logo.png，因为 Vite 会把 public 目录下的文件映射到服务器的根路径下。如果你在 HTML 或者 JS 里写了 ./public/logo.png，生成的路径可能会有问题，导致 404。

其次，检查一下你的服务器配置。如果你用的是 Nginx 或者 Apache，确保它们的根目录指向了你的 dist 文件夹，而不是更深层次的某个子目录。举个例子，Nginx 的配置可以这样写：

server {

    listen 80;

    server_name your-domain.com;

    root /path/to/your/dist;

    index index.html;



    location / {

        try_files $uri /index.html;

    }

}

这个配置的关键是 root 要指向 dist，并且通过 try_files 确保未匹配的请求能 fallback 到 index.html，这对于前端路由也很重要。

最后，关于你的 vite.config.js 配置，目前看起来没啥大问题，不过你可以再确认一下 assetsDir 和 assetFileNames 的设置是否符合你的需求。如果你希望静态资源都放在 assets 目录下，那现在的配置是 OK 的。

总结一下：
1. 页面里引用 public 目录下的文件时，直接用绝对路径，比如 /logo.png。
2. 检查服务器配置，确保根目录指向了 dist，并且有正确的 fallback 规则。
3. 如果还是有问题，试着清理一下缓存重新打包，有时候缓存也会导致奇怪的问题。

可以试试这样调整，应该就能解决问题了！如果还有其他疑问，随时来问哈。

2026-02-19 03:02

皇甫艳杰 Lv1

你这个问题出在路径引用方式上。Vite 的 public 目录里的资源在构建后会直接复制到输出目录的根目录下，不需要也不应该通过 ./public/logo.png 这种方式引用。

你在代码里写 ./public/logo.png，浏览器就会按相对路径去请求，但实际部署时服务器结构可能不匹配，导致 404。正确做法是：public 目录下的资源应该用绝对路径引用，也就是以 / 开头。

推荐的做法是把图片引用改成 /logo.png，这样开发和生产环境都能正确访问。比如：

<img src="/logo.png" alt="Logo">

同时确保你的 vite.config.js 没有额外干扰 public 目录的行为，publicDir: 'public' 这个配置没问题，默认就是这个值，可以省略。

另外注意如果你部署的项目不是放在服务器根目录，而是子目录（比如 example.com/my-vite-app），那还得设置 base 配置项为 '/my-vite-app/'，否则静态资源路径还是对不上。

总结一下：public 下的文件走根路径访问，别带 public 文件夹名在引用路径里，改用 /xxx.png 就行了。

2026-02-09 02:01