时间戳

首页 > 解决方案 > 在 Vite 中更改输入和输出目录

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

问题描述

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

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

标签： vite

解决方案

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


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

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

推荐阅读