在 Vite 中更改输入和输出目录答案

【问题标题】：Changing the input and output directory in Vite在 Vite 中更改输入和输出目录
【发布时间】：2021-06-26 00:18:48
【问题描述】：

我将 Vite (https://vitejs.dev/) 用于静态多页网站。这是构建命令后的默认项目文件夹结构。

my-app/
├─ node_modules/
├─ dist/
│  ├─ assets/
│  ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json

但我想让它成为一个多页站点并更改输入和输出目录以获得更好的组织方式

my-app/
├─ node_modules/
├─ package.json
├─ src/
│  ├─ about.html
│  ├─ index.html
│  ├─ main.js
│  ├─ style.scss
├─ dist/
│  ├─ assets/
│  ├─ about.html
│  ├─ index.html

基本上，它应该将“src”作为输入文件夹，并将“dist”作为“my-app”的子文件夹输出。当我尝试这样做时，它会显示错误，然后我将 package.json 的脚本更改为此

  "scripts": {
    "dev": "vite src",
    "build": "vite build src",
    "serve": "vite preview"
  },

这样，'dev' 命令可以正常工作。但是'build'命令使dist文件夹在src文件夹内，并且除了index.html之外不生成其他HTML文件

现在我该如何解决这个问题？有什么建议吗？

【问题讨论】：

如果您想知道这种行为的原因（src 中的dist 文件夹而不是项目root 文件夹），您可以阅读此分析器：stackoverflow.com/a/69540835/774432

标签： vite

【解决方案1】：

创建一个vite.config.js 文件并定义您的项目根目录和输出目录：


module.exports = {
  root: 'src',
  build: {
    outDir: '../dist'
  }
}

欲了解更多信息，请查看config。

【讨论】：

【解决方案2】：

对于多页，您需要指定每个入口点。详情here。要动态指定src/ 目录中的所有.html 文件作为入口点，您可以像这样设置vite.config.js：

import path from "path";
import glob from "glob";

export default {
  root: path.join(__dirname, "src"),
  build: {
    outDir: path.join(__dirname, "dist"),
    rollupOptions: {
      input: glob.sync(path.resolve(__dirname, "src", "*.html")),
    },
  },
};

【讨论】：

【解决方案3】：

当你想在你的 vite.config.ts 中使用 defineConfig 时，你可以这样使用它：

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [reactRefresh(), eslintPlugin({ cache: false })],
    root: 'src',
    build: {
        outDir: '../dist'
    }
})

【讨论】：

【解决方案4】：

你可以像这样设置你的 vite.config.js：

import path from 'path'

export default {
  root: path.resolve(__dirname, 'src'),
  build: {
    outDir: path.resolve(__dirname, 'dist'),
    rollupOptions: {
      input: {
        index: path.resolve(__dirname, 'src/index.html'),
        about: path.resolve(__dirname, 'src/about.html')
      }
    }
  }
}

【讨论】：