Vite 打包后favicon.ico、manifest.json未复制到dist目录问题求助

核心问题原因 #

• 配置项publicDir设置错误：你当前配置中将publicDir设为了'dist'，该配置的作用是指定「需要原封不动复制到打包输出目录」的静态资源文件夹，且路径相对于你配置的root: 'src'，Vite会去src/dist目录下找要复制的资源，你的项目中不存在该目录，自然不会复制任何文件。
• 之前尝试的操作失效原因：publicDir是Vite的顶级配置项，不属于build配置下的子项，你在build中添加该配置不生效；你在src下新建public目录但未修改publicDir配置为'public'，Vite还是会去找错误的dist目录，所以也不会生效。

解决方案 #

方案1：使用Vite默认规范的public目录（推荐） #

1. 在src目录下新建public文件夹，将favicon.ico和manifest.json移动到该文件夹中
2. 修改vite.config.js的publicDir配置为'public'，或者直接删除该配置项（Vite默认publicDir值为'public'）
   修改后的配置示例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({command, mode }) => {
  return {
    assetsDir: 'res',
    plugins: [vue()],
    publicDir: 'public', // 可直接删除该行使用默认值
    root: 'src',
    build: {
      emptyOutDir: true,
      outDir: '../dist'
    }
  }
});

3. 重新执行npm run build即可看到两个文件被复制到dist根目录。

方案2：不修改文件现有存放位置 #

如果要保留文件在src/assets下的存储结构，可以使用vite-plugin-static-copy插件指定复制规则：

1. 安装插件：
   npm i -D vite-plugin-static-copy
2. 修改配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig(({command, mode }) => {
  return {
    assetsDir: 'res',
    plugins: [
      vue(),
      viteStaticCopy({
        targets: [
          { src: 'assets/favicon.ico', dest: './' },
          { src: 'assets/manifest.json', dest: './' }
        ]
      })
    ],
    root: 'src',
    build: {
      emptyOutDir: true,
      outDir: '../dist'
    }
  }
});

3. 重新打包即可生效。

补充说明 #

如果你的index.html中引用了这两个文件，直接使用根路径/favicon.ico、/manifest.json即可，打包后路径会自动匹配dist目录结构。

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