11

我正在将 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 文件

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

4

4 回答 4

16

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


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

有关更多信息，请查看配置。

于 2021-03-30T08:51:02.507 回答
4

对于多页，您需要指定每个入口点。详情在这里。要动态指定目录中的所有.html文件src/作为入口点，您可以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")),
    },
  },
};
于 2021-03-30T20:00:19.430 回答
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'
    }
})
于 2021-09-22T08:05:36.733 回答
1

你可以像这样设置你的 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')
      }
    }
  }
}
于 2021-07-28T11:22:36.907 回答