vite - 在 Vite 中更改输入和输出目录

Question

我将 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'命令在src文件夹内创建dist文件夹并且不生成除index.html之外的其他HTML文件
现在我该如何解决这个问题？有什么建议吗？

Answer 1

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

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

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