Vite - 静态文件不复制

Question

我有一个依赖于Vite 的Vue.js 应用程序。在此应用程序中，我需要将两个静态文件复制到我的dist目录中：favicon.ico和manifest.json. 我的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.htmldistfavicon.icomanifest.jsondistpublicDir: 'assets'buildpublicsrc

Answer 1

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

所以，正如您所指定的root: 'src'，publicDir: 'dist'然后您的public目录是./src/dist

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

更多信息如下

如果您拥有以下资产：

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

然后医生说：

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

这意味着，如果您只是将其放在目录favicon.ico下，/public它将在构建后复制到该dist目录。

如果您有普通 配置，则上面的注释是正确的vite，但如果您更改配置publicDir选项vite，请在插图后阅读下面的内容。

favicon.icodist之后复制进去vite build

如果您设置自定义publicDir：

正如本答案顶部所述，public （vite 选项）目录是相对于您的root （vite 选项）目录的。

因此，如果您设置root: './src'并设置publicDir: 'mypublic' ，那么公共目录将为 ./src/mypublic.