在构建- ViteJS期间更改特定文件的输出路径。

Question

我正在使用ViteJS (html、scss和JS)创建一个静态多页网站，我无法找到方法更改html文件的构建路径以将它们放到dist文件夹的根目录中。

我的项目结构是：

├── dist
    └──...
    └──src
       └── pages
             └── some-page.html
    └──...
├── node_modules
├── src
    └── pages
        └── some-page.html
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js

我想：

├── dist
    └── ...
    └── some-page.html
    └── ...
├── node_modules
├── src
    └── pages
        └── some-page.html
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js

我的vite.config.js (如文档所建议的)是：

const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'index.html'),
                multiminerales: resolve(__dirname, 'src/pages/some-page.html')
            }
        }
    }
})

所以，我想我需要更改输入对象，但是我找不到任何有关它的信息，我知道公共目录，但是它会破坏我所有的文件夹结构。我能做什么?

Answer 1

是啊，我也遇到了这样的问题。

对我来说，把index.html移动到src/pages是可行的，

然后在vite.config.js中指定root: './src/pages'。

因此，您的配置可能如下所示：

const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
    root: './src/pages',
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'src/pages/index.html'),
                multiminerales: resolve(__dirname, 'src/pages/some-page.html')
            }
        }
    }
})