如何在Vite（搭配Vituum、vite-plugin-pug）中用Pug访问static文件夹

我首次在Vite中搭配@vituum/vite-plugin-pug插件使用Pug，项目结构如下：

src
  js
  css

static
  imgs
    image.jpg

views
  pages
    index.pug

我希望在index.pug文件中使用路径/imgs/image.jpg调用图片，无需添加../static/前缀。尝试修改解析器等设置但未成功，当前Pug代码如下：

img(src="/imgs/image.jpg")

我的vite.config.js文件内容如下：

import vituum from 'vituum'
import { fileURLToPath, URL } from 'node:url'
import pug from '@vituum/vite-plugin-pug'
import pages from 'vituum/plugins/pages.js'
import imports from 'vituum/plugins/imports.js'

export default {
    base: './',
    publicDir: '../static/',
    plugins: [
        vituum(),
        pug(),
        imports({
            paths: [
                '/src/styles/*/**', 
                '/src/scripts/*/**', 
                '/src/assets/*/**'
            ]
        }),
        pages({
            dir: './views/pages',
            root: './',
            normalizeBasePath: true
        })
    ],
}

是否需要调整项目结构？恳请帮忙解答（这是我第一个Vite项目）。

解决方案 #

不需要调整现有项目结构，问题出在Vite的基础配置和路径解析逻辑上，按以下步骤修改即可：

1. 修正base配置
   当前设置base: './'为相对路径，会导致绝对路径/imgs/image.jpg无法正确指向static目录。开发环境下可将base改为'/'；如果是生产部署，可根据实际域名根路径调整，或保持'./'并配合路径别名使用。

2. 添加Vite路径别名与Pug解析配置
   在vite.config.js中配置resolve.alias映射路径，同时给Pug插件补充解析规则，确保模板能识别短路径：

   import vituum from 'vituum'
   import { fileURLToPath, URL } from 'node:url'
   import pug from '@vituum/vite-plugin-pug'
   import pages from 'vituum/plugins/pages.js'
   import imports from 'vituum/plugins/imports.js'
   
   export default {
       base: '/',
       publicDir: '../static/',
       resolve: {
           alias: {
               '/imgs': fileURLToPath(new URL('../static/imgs', import.meta.url))
           }
       },
       plugins: [
           vituum(),
           pug({
               options: {
                   basedir: fileURLToPath(new URL('../static', import.meta.url))
               }
           }),
           imports({
               paths: [
                   '/src/styles/*/**', 
                   '/src/scripts/*/**', 
                   '/src/assets/*/**'
               ]
           }),
           pages({
               dir: './views/pages',
               root: './',
               normalizeBasePath: true
           })
       ],
   }
   

3. 验证路径有效性
   修改完成后，img(src="/imgs/image.jpg")就能正确指向static/imgs/image.jpg。如果开发环境仍有问题，可直接在浏览器访问http://localhost:5173/imgs/image.jpg，确认Vite开发服务器是否正确挂载了static目录下的资源——Vite会自动将publicDir中的资源暴露在服务器根路径下。

另外，也可以把static目录移到项目根目录（与src、views同级），将publicDir设为'./static'，这样路径解析会更直观，但现有结构通过配置就能解决问题，无需强制调整。

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