Vite配置base选项后静态资源404怎么办？

小敏提问于 2026-02-04 21:09:30 阅读 53

工具

在用Vite打包生产环境时，我设置了base: '/dist/'，但访问页面时图片和CSS都404了。调整过publicDir也没用，控制台报错说资源路径变成了/dist/dist/images/logo.png，这是为什么呢？

我的vite.config.js配置是这样的：


import { defineConfig } from 'vite';

export default defineConfig({
  base: '/dist/',
  build: {
    outDir: 'dist'
  }
});

项目结构是src里放源码，dist是输出目录。访问部署后的页面时，浏览器请求路径变成了双重dist前缀，手动删除一个/dist就能正常加载。应该怎样正确配置路径？

配置详解

我来解答赞 3 收藏

反馈

2 条解答

码农艺晗 Lv1

这个问题其实挺常见的，主要是你配置的 base 和实际部署路径对不上导致的。Vite 的 base 是用来设置静态资源的基础路径的，但它不是用来指定打包输出目录的，而是一个“访问路径”的前缀。

从你的描述来看，问题出在 base: '/dist/' 这个配置上。假设你把项目部署到服务器后，/dist/ 是你的资源根目录，那么 Vite 会默认在这个路径下继续拼接资源路径，结果就变成了 /dist/dist/images/logo.png，多了一层 /dist，这就是为啥浏览器报 404。

解决办法其实很简单，调整一下 base 的值就行。如果你的资源是直接放在 /dist/ 下的，那 base 应该设置成 '/' 而不是 '/dist/'。改完之后重新打包，看看是不是正常了。

还有一种情况，如果你确实需要把资源放在一个子路径下，比如 /subpath/，那你得确保服务器也支持这个子路径访问。比如 Nginx 或者 Apache 的配置里要正确指向这个路径，不然还是会 404。

最后提一句，别忘了清理之前的打包文件再重新跑一遍 vite build，有时候缓存也会导致一些奇怪的问题。

下面是修改后的 vite.config.js 示例：

import { defineConfig } from 'vite';



export default defineConfig({

  base: '/', // 修改这里

  build: {

    outDir: 'dist'

  }

});

如果还是有问题，检查一下你的服务器配置，看看是不是路径映射没弄对。毕竟前端打包和后端部署要配合好才行。

2026-02-16 20:02

设计师雨婷 Lv1

这个问题我之前也踩过坑，你遇到的是 Vite 的 base 配置和实际部署路径不一致导致的资源路径叠加问题。我们一步一步来解决。

首先你要明白 base 配置的作用：它决定了你的项目部署在哪个子路径下。比如你设置了 base: '/dist/'，那所有静态资源的路径前面都会加上这个路径。这时候如果 build.outDir 也设置成 dist，那就会导致资源文件的路径变成 /dist/dist/xxx 这种形式。

### 为什么会双重 dist 前缀？

你设置的 base 是 /dist/，Vite 默认会在资源路径前面加上这个前缀。而 build.outDir 又是 dist，所以最终路径就变成了：

/dist/dist/images/logo.png

这就相当于浏览器去请求了：http://你的域名/dist/dist/images/logo.png，显然这个路径是错的。

### 正确的配置方式

我们来调整配置，按下面的思路来改：

1. **base 保持为 /dist/**：因为你要部署到子路径
2. **build.outDir 改成其他名字，比如 build 或者 vite-dist**

修改后的配置如下：

import { defineConfig } from 'vite';



export default defineConfig({

  base: '/dist/',       // 项目部署在 /dist/ 路径下

  build: {

    outDir: 'build'      // 输出目录改成 build，避免和 base 重名

  }

});

这样打包后，输出路径会是 build/ 目录，里面的资源路径就是 /dist/assets/xxx 这种形式，就不会出现重复路径了。

### 部署时的路径处理

你最终部署时，把 build/ 目录下的内容放到服务器的 /dist/ 路径下即可，比如：

- Nginx 配置中设置一个 location /dist/，指向 build 目录
- 或者把 build 目录的内容放到你服务器指定的 /dist/ 子路径下

### 补充说明：public 目录的资源路径

如果你用了 public 目录存放静态资源（比如 logo.png），这些资源的访问路径是相对于项目根路径的。比如你在 public/images/logo.png 的路径，访问时是 /images/logo.png。这时候如果你 base 是 /dist/，那实际访问路径应该是：

/dist/images/logo.png

如果你希望 public 目录的资源也能正确识别 base 路径，建议使用相对路径或者 import 引入的方式。

### 总结一下重点

- base 是资源路径的前缀
- build.outDir 是输出目录名称，不要和 base 设置成一样的路径
- 避免 base 和 outDir 名称冲突就可以解决路径叠加问题

这样改完打包部署后，静态资源路径就不会出错了。如果你还有 public 目录的资源加载问题，我们可以再一起分析你的具体使用方式。

2026-02-04 21:12