Vite 报错 base option should end with a slash 解决方法

base 是 vite 的公共基础路径，产物里所有静态资源的引用地址都会以它为前缀拼出来。vite 的拼接方式是直接字符串相加，所以末尾那个斜杠必须有——少了它，base 的最后一段会和资源路径粘在一起，生成 /distassets/index.js 这样的错误地址，页面加载时资源全部 404。

vite 检测到这种写法会给出 "base" option should end with a slash 的提示。这是个 warning 而不是 error，打包照样能成功，很容易被忽略过去，直到部署后发现页面白屏才回头找。

场景

vite 打包出现如下错误

(!) "base" option should end with a slash.

问题原因

设置 base 时没有以 / 为结尾

解决方法

本地预览设置时结尾加上 '/'

修改前

结尾是 dist，没有斜杠。这时资源地址会被拼成 .../distassets/xxx.js，路径整个错位。

http://localhost:63342/wfly-uniapp-monorepo/apps/vft-demo/dist

修改后

补上结尾的 /，拼出来才是 .../dist/assets/xxx.js。规则很简单：base 无论写相对路径、绝对路径还是完整 URL，末尾都要带斜杠。

http://localhost:63342/wfly-uniapp-monorepo/apps/vft-demo/dist/

注意事项

• 部署到子路径（比如 https://xxx.com/blog/）时 base 要写成 '/blog/'，前后都带斜杠。只写 '/blog' 就会触发这个警告。
• 不确定最终部署路径、或者要在本地用 file:// 直接打开产物时，把 base 设成 './' 生成相对路径最省事。代价是不能配合 history 模式的前端路由——相对路径会随当前 URL 层级变化而解析到不同位置。
• base 只作用于构建产物里的资源引用，不会自动给前端路由加前缀。用 vue-router / react-router 时还要单独配它们各自的 base 选项，两处对不上就会出现资源能加载但路由 404。
• CSS 里 url() 引用的资源、以及 public 目录下的文件同样受 base 影响。而 JS 里手写的字符串路径不会被处理，要用 import.meta.env.BASE_URL 拼。