svelte - 如何使用 Vite 配置 Svelte 项目，以便在构建期间不复制静态文件？

Question

在正常的 Svelte 项目(没有 SvelteKit)中，静态文件位于 public 目录中，并且在运行 npm run build 时(rollup -c) src 文件夹被编译到 public/build 中，然后 public 文件夹可以托管在某个地方。

我现在将(一个已经存在的)Svelte 项目切换到 Vite，静态文件仍在 public 下，但是在运行 npm run build 时(vite build)，所有内容都捆绑到 dist 目录中。所以public目录下的所有文件其实都是复制过来的，在项目中存在两次。这意味着当更改或添加某些内容(不影响应用程序逻辑)时，需要先重建项目，然后才能重新部署。

是否可以通过配置更改，将所有编译文件再次添加到 public 目录，或者静态文件直接驻留在 dist 中并且不复制任何内容在构建过程中？

编辑:项目应该仍然能够在开发模式下运行 npm run dev (vite) 并提供 Assets

Answer 1

是的，您可以将公共(public)文件保存在 dist 中而无需复制，但这有点“黑客”。

首先，您需要禁用 publicDir 选项以禁用复制。

然后禁用 emptyOutdir 来保留文件。

最后，您可能想要清理旧 Assets ，因此添加了一个 buildStart Hook ，在构建开始时清理 dist/assets。

最后的vite.config.js(你可能想添加一些错误处理):

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { rm } from 'fs/promises'

// https://vitejs.dev/config/
export default defineConfig(({ command }) => ({
  plugins: [
    svelte(),
    {
      buildStart() {
        if (command === 'build')
          rm('./dist/assets', { recursive: true }).catch(() => {})
      }
    },
  ],
  publicDir: false,
  build: {
    emptyOutDir: false,
  }
}))

---

更新:要在 npm run dev 中提供这些文件，需要额外的 hack。您需要创建一个自定义服务器来实现这一点。 (vite好像没有提供配置方式。)

server.js:

import express from 'express'
import { createServer as createViteServer } from 'vite'

// Or use require if nodejs complains about ES module
// const express = require('express')
// const { createServer: createViteServer } = require('vite')

async function createServer() {
  const app = express()

  // Create Vite server in middleware mode.
  const vite = await createViteServer({
    server: { middlewareMode: 'html'},
  })

  // Do not serve built index.html when visiting http://localhost:3000/
  app.use(express.static('dist', { index: false }))

  // Use vite's connect instance as middleware
  app.use(vite.middlewares)

  app.listen(3000)
}

createServer()

并将package.json中的"dev": "vite"替换为"dev": "node server.js"