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 编译我的程序时，我可以看到在 dist 目录中创建了一个名为 index.html 的文件。但是，我一直没有成功将 favicon.ico 和 manifest.json 文件复制到 dist 目录，这正是我所需要的。我尝试将 publicDir: 'assets' 添加到 build 选项。但是，那没有用。我还尝试在 src 目录下创建一个 public 目录，以便与 this documentation 一起努力。但是，这并没有将文件移动到目录中。我做错了什么？

Answer 1

原因：public（vite选项）目录是相对于你的root（vite选项）目录。

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

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

下面有更多信息

如果您的资产是：

从未在源代码中引用（例如 favicon.ico）
必须保留完全相同的文件名（没有散列）
...或者您根本不想为了获取其 URL

然后医生说：

You can place the asset in a special public directory under your project root. Assets in this directory will be served at root path / during dev, and copied to the root of the dist directory as-is.

这意味着如果你简单地将 favicon.ico 放在 /public 目录下，它将在构建后被复制到 dist 目录。

如果你有一个 vanilla vite 配置，上面的注释 是正确的，但是如果你更改 vite 配置的 publicDir 选项然后在插图之后阅读下面的内容。

favicon.ico 在 vite build
之后复制到 dist

如果您设置自定义 publicDir :

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

因此，例如，如果您设置 root: './src' 并设置 publicDir: 'mypublic' ，那么 public 目录将是 ./src/mypublic。

Vite - 静态文件不复制

Vite - Static Files Are Not Copying

vue.js