在构建过程中更改特定文件的输出路径 - 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')
            }
        }
    }
})

所以，我认为我需要更改输入对象，但我找不到任何关于它的信息，我知道公共目录，但它会破坏我的所有文件夹结构。我该怎么办？

- Guillermo Uriel Cruz Fuente

---

我认为这很相关：更改多页面站点的输入和输出目录 - vitejs/vite GitHub - Darryl Noakes

这篇关于“Vite-更改资产输出目录”的答案似乎表明您可以随意更改构建文件的整个路径和文件名，因此这可能值得一试。我可以尝试并写出一个答案？ - Darryl Noakes

我已经尝试过了，但是我找不到如何让Vite在普通项目中实际使用Rollup来打包任何内容。如果有机会的话，我可能会更深入地研究它。 - Darryl Noakes

Answer 1

您可以使用此配置

import { fileURLToPath, URL } from 'node:url'

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueJsx from '@vitejs/plugin-vue-jsx'

    export default defineConfig({
      root: resolve(path, 'templates'),
      base: 'https://aaronchristian.test/wp-content/themes/portfolio/',
      plugins: [vue(), vueJsx()],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      },
      build: {
        rollupOptions: {
          input: {
            index: fileURLToPath(new URL('./src/main.js', import.meta.url)),
            'index.html': fileURLToPath(new URL('./templates/index.html', import.meta.url))
          },
          output: {
            dir: 'dist',
            entryFileNames: 'assets/[name].js',
            assetFileNames: 'assets/[name].[extname]',
            chunkFileNames: 'assets/[name].js'
          }
        }
      }
    })

- The_Thinker

---

将该代码作为片段是没有意义的，因为它不能独立运行。请将其编辑为普通的代码块（带有“javascript”语言标识符）。 - Darryl Noakes

Answer 2

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

对我来说，将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')
            }
        }
    }
})

- toddscottik

---

如果您想使用.env文件或公共文件夹，root选项将无效。我只想设置输出HTML路径。 - undefined