Vite无法检测被其他PUG引用的PUG文件变更问题求助

问题描述 #

在Pug文件中通过include嵌套引用其他Pug文件时，修改被引用的子Pug文件不会触发Vite热更新，只有修改直接被.vue文件引用的父Pug文件才会被检测到。这是因为子Pug文件未被加入Vite的依赖追踪图谱。

解决方案 #

1. 正确配置vite-plugin-pug插件

你已经安装了vite-plugin-pug，但未在Vite配置中启用并配置监听选项。修改vite.config.js如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pugPlugin from 'vite-plugin-pug'

export default defineConfig({
  plugins: [
    vue(),
    // 配置Pug插件，开启嵌套文件监听
    pugPlugin({
      watch: true, // 关键：启用对嵌套Pug文件的依赖追踪
      locals: {} // 可添加Pug全局变量，按需配置
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 8080
  }
})

2. 检查Pug引用路径正确性

确保include路径符合文件实际位置，比如父Pug和子Pug在同一目录时，应使用相对路径：

div 
    include ./index-2.pug

避免因路径错误导致Vite无法识别依赖关系。

3. 手动指定Vite监听范围（备选方案）

如果插件配置后仍不生效，可在Vite配置中强制监听所有Pug文件：

export default defineConfig({
  // ...其他配置
  server: {
    port: 8080,
    watch: {
      include: ['src/**/*.pug'] // 监听src目录下所有Pug文件
    }
  }
})

4. 升级vite-plugin-pug版本

当前使用的vite-plugin-pug@0.3.2可能存在兼容性问题，尝试升级到最新版本：

npm update vite-plugin-pug

原理说明 #

开启vite-plugin-pug的watch选项后，插件会解析Pug中的include语句，自动将嵌套的子Pug文件加入Vite的热更新依赖图谱，从而实现修改子文件时触发页面更新。

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