如何在浏览器中访问Vite项目public文件夹内的图片？

文件夹结构 #

.
├── public
│   └── images
│       ├── image1.png
│       └── image2.png
├── src
├── vite.config.js
└── [...]

vite.config.js 配置 #

const path = require('path')

export default {
    root: path.resolve(__dirname, 'src'),
    server: {
        port: 3000,
        hot: true
    },
    publicDir: 'public'
}

尝试访问以下路径均提示“Not found”：

• http://127.0.0.1:3000/public/images/image1.png
• http://127.0.0.1:3000/images/image1.png

请问该如何访问public文件夹下的图片？

问题出在publicDir的配置逻辑上：你把项目根目录root设为了src文件夹，此时publicDir: 'public'会让Vite默认去src/public目录查找静态资源，但你的public文件夹实际和src同级，所以导致资源找不到。

你需要修改publicDir的配置，指定正确的public文件夹路径，两种方法可选：

方法1：使用绝对路径（推荐） #

直接通过绝对路径指向项目根目录下的public文件夹：

const path = require('path')

export default {
    root: path.resolve(__dirname, 'src'),
    server: {
        port: 3000,
        hot: true
    },
    publicDir: path.resolve(__dirname, 'public')
}

方法2：使用相对路径 #

因为root是src，向上一级就是项目根目录，所以可以用相对路径../public：

const path = require('path')

export default {
    root: path.resolve(__dirname, 'src'),
    server: {
        port: 3000,
        hot: true
    },
    publicDir: '../public'
}

修改配置后重启Vite服务，即可通过以下路径访问图片：

• http://127.0.0.1:3000/images/image1.png

注意：Vite会自动把public文件夹下的资源挂载到服务器根路径，所以URL里不需要加public前缀。

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