Vite & Svelte编译产物同时输出到dist及view目录问题求助

你之前的配置思路不对——Svelte插件的build.outDir并不是用来控制项目最终输出目录的，它是Svelte内部编译组件时的临时目录配置，和Vite的最终输出无关。Vite本身默认只能指定一个主输出目录，要实现同时输出到dist和view，可以用以下两种可行方案：

方案一：使用Vite复制插件（推荐） #

借助vite-plugin-copy插件，在构建完成后自动把dist目录的内容复制到view：

1. 先安装插件：

npm install vite-plugin-copy --save-dev
# 或 yarn add vite-plugin-copy -D
# 或 pnpm add vite-plugin-copy -D

2. 修改vite.config.js：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import copy from 'vite-plugin-copy';

export default defineConfig({
  plugins: [
    svelte(),
    copy({
      targets: [
        {
          src: 'dist/**/*',
          dest: 'view'
        }
      ],
      hook: 'writeBundle', // 确保构建完成后再执行复制
      overwrite: true // 覆盖目标目录已存在的文件
    })
  ],
  build: {
    outDir: 'dist' // 保持主输出目录为默认的dist
  }
});

方案二：用npm脚本实现复制 #

不需要额外安装插件，直接在构建命令后追加复制指令，跨平台需要区分命令：

• Windows系统：修改package.json的scripts：

"scripts": {
  "build": "vite build && xcopy dist\\* view\\ /E /Y"
}

/E表示复制子目录及文件，/Y表示覆盖时不提示。

• Linux/macOS系统：修改package.json的scripts：

"scripts": {
  "build": "vite build && cp -r dist/* view/"
}

两种方案选其一即可：插件方案更贴合Vite的构建流程，适合需要复杂复制规则的场景；脚本方案简单直接，无需额外依赖。另外，记得把你之前在Svelte插件里配置的build.outDir删掉，那个配置对你的需求没用。

内容的提问来源于stack exchange，提问作者BGW