如何配置Vite忽略index.html中已引入的manifest文件？

方法一：利用public目录（最简单） #

• 将你的app.webmanifest文件移动到Vite项目根目录下的public文件夹（无则新建）
• 在index.html里修改manifest的引用路径为绝对路径：

  <link rel="manifest" href="/app.webmanifest">
  

• 执行npm run build后，Vite会直接把app.webmanifest复制到dist根目录，链接不会被添加hash或修改路径。

方法二：通过Vite配置钩子自定义处理 #

如果不想移动manifest文件，可在vite.config.js/vite.config.ts中添加钩子，还原被修改的链接：

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      name: 'preserve-manifest-link',
      transformIndexHtml(html) {
        // 替换回你原始的manifest链接路径，按需调整正则
        return html.replace(/href="\/assets\/app-.+\.webmanifest"/, 'href="./app.webmanifest"')
      }
    }
  ]
})

方法三：标记资源让Vite跳过解析 #

在index.html的manifest链接标签上添加type="asset/source"属性，告知Vite不处理该资源：

<link rel="manifest" href="./app.webmanifest" type="asset/source">

• 需确保manifest文件最终能被复制到dist对应目录，可通过以下方式实现：
  1. 在Vite配置里添加资源包含规则：

     export default defineConfig({
       build: {
         assetsInclude: ['**/*.webmanifest']
       }
     })
     

  2. 或在package.json的build脚本里追加复制命令：

     "scripts": {
       "build": "vite build && cp ./app.webmanifest ./dist/"
     }
     

内容的提问来源于stack exchange，提问作者Deisbel R Diaz