Vite - 静态文件不复制

我有一个 Vue.js 应用程序依赖于Vite https://vitejs.dev/。在此应用程序中，我有两个静态文件需要复制到我的dist目录：favicon.ico and manifest.json. My vite.config.js文件看起来像这样：

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

// https://vitejs.dev/config/
export default defineConfig(({command, mode }) => {
  return {
    assetsDir: 'res',
    plugins: [vue()],
    publicDir: 'dist',
    root: 'src',
    build: {
      emptyOutDir: true,
      outDir: '../dist'
    }
  }
});

我的目录结构如下所示：

/
  /dist
  /src
    /assets
      favicon.ico
      manifest.json
    /res
      /css
        theme.css
    App.vue
    main.js
    index.html
  package.json
  README.md
  vite.config.js

当我使用编译程序时npm run build，我可以看到一个名为index.html被创建在dist目录。然而，我一直未能成功获得favicon.ico and manifest.json文件复制到dist目录，这就是我需要的。我尝试添加publicDir: 'assets' to the build选项。然而，这没有用。我也尝试创建一个public目录下的src目录，努力遵循本文档 https://vitejs.dev/guide/assets.html#the-public-directory。但是，这并没有将文件移动到目录中。我究竟做错了什么？

Reason：公共（vite 选项）目录是相对于您的根（vite 选项）目录的。

所以，正如你所指定的root: 'src' and publicDir: 'dist'那么你的public dir is ./src/dist

基于您的文件夹树的插图vite.config.js :

更多信息如下

如果您拥有以下资产：

• 从未在源代码中引用（例如 favicon.ico）
• 必须保留完全相同的文件名（不进行哈希处理）
• ...或者您只是不想为了获取其 URL 而先导入资产

然后医生说：

您可以将资产放置在特殊的位置public你的目录下 项目根。该目录中的资源将在根路径下提供/在 dev 期间，并按原样复制到 dist 目录的根目录。

这意味着如果您只是将favicon.ico在下面/publicdir 它将被复制到dist构建后的目录。

上面的注释如果你有香草，这是真的 vite配置，但如果你改变publicDir的选项vite配置，然后在插图后阅读下面的内容。

favicon.ico复制进去dist after vite build

如果您设置了自定义publicDir :

正如这个答案顶部所说，public （vite选项）目录是相对于你的root （vite选项）目录。

所以，如果你设置root: './src'并设置publicDir: 'mypublic' 那么公共目录将是 ./src/mypublic.