Vite：在构建输出中包含文件答案

【问题标题】：Vite: Including files in build outputVite：在构建输出中包含文件
【发布时间】：2022-12-10 18:35:00
【问题描述】：

这是一个 Vue 3 + Vuetify + TS + Vite + VSCode 项目。

我试图在生产版本中捆绑一个 XML 文件。在将文件吐出之前，需要对文件应用一些转换。找到可以进行转换的this Vite plug-in。但不幸的是，它似乎没有以任何方式触及 XML 文件。如果我将我的 XML 文件放在 public 文件夹中，它会被复制到构建输出中，但不会被转换插件处理。如果我把它放在assets 或src 下的其他地方，它就会被忽略。

我如何让 Vite 在构建输出中包含某些文件并通过转换传递它？

注意：在我将项目迁移到 Vite 之前，我使用的是 Vue 2 和 WebPack，在这里我可以使用众所周知的 CopyWebpackPlugin 来执行此转换。直到现在还没有找到它的 Vite 等价物。

【问题讨论】：

标签： node.js npm vite

【解决方案1】：

您可能只想编写一个脚本来进行转换并将其添加到您的 npm 脚本中。我创建了一个简单的 chrome extension 来玩 VITE。拥有多个 html 文件非常简单：

import { defineConfig, BuildOptions } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        popup: resolve(__dirname, 'popup/index.html'),
        options: resolve(__dirname, 'options/index.html'),
      },
    }
  }
})

但是我必须创建一个单独的 vite 配置文件来处理后台脚本，因为它有特殊的配置（不需要散列，所以我可以在我的清单中指定名称，esm 模块格式），并且它采用打字稿并输出“背景” .js' 在公用文件夹中：

import { defineConfig } from 'vite'
const { resolve } = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    emptyOutDir: false,
    rollupOptions: {
      input: resolve(__dirname, 'background.ts'),
      output: {
        format: "esm",
        file: "public/background.js",
        dir: null,
      }
    }
  }
})

你可以简单地将 xml 文件放在你的 src 文件夹中并运行一个特殊的脚本（也许创建一个“脚本”文件夹）来进行转换并将结果存储在 public 文件夹中，vite 将在其中获取它并将其复制到 dist 文件夹. package.json 中的“构建”脚本可能如下所示：

  "scripts": {
    "build": "node scripts/transform-xml.mjs && vite build",
  },

【讨论】：

谢谢。这听起来像是一个可行的选择。

【解决方案2】：

包的作者在2.0.1 版本中有introduced a new option 名为replaceFiles，您可以使用它指定将通过转换管道传递的文件。我现在可以在 vite.config.js 中执行以下操作，以在构建后替换输出 manifest.xml 文件中的变量：

const replaceFiles = [resolve(join(__dirname, '/dist/manifest.xml'))];

return defineConfig({
  ...
  plugins: [
  vue(),
  transformPlugin({
    replaceFiles,
    replace: {
      VERSION_NUMBER: process.env.VITE_APP_VERSION,
      SERVER_URL: process.env.VITE_SERVER_URL,
    },
    ...
  }),
  ...
});

【讨论】：